Remove fullscreen label about vue-unity-webgl HOT 5 OPEN

The issue is the footer Unity.vue component doesn't match the index.html and static/TemplateData/style.css file that unity gives you. So if you include it the different footers will "clash". A kind of hacky solution for this is to select the element with the fullscreen class in the mounted lifecycle hook and set its text content to an empty string, Unfortunately, the label will still appear for a brief moment before being removed.

Alternatively you could opt to not include the static/TemplateData/style.css. Then nothing will clash but the fullscreen text will still be there and can be hidden using :hide-footer="true" attribute. this also allows you to remove a few files from your templateData folder like the webgl-logo.png, fullscreen.png and style.css for starters. I kind of like not having all that stuff in the footer personally.

On a side note, I tried to just edit the source template but it didn't seem to change anything for some reason. I tried rerunning the dev script and also deleting any service workers so I'm kind of confused there... I assume it has something to do with the JavaScript file that comes with the package.

<!-- the components footer html as is-->
<div class="footer" v-if="hideFooter !== true">
  <a class="fullscreen" @click.prevent="fullscreen">Fullscreen</a>
</div>

mounted() {
  document.querySelector('.fullscreen').textContent = ''
},

from vue-unity-webgl.

Hi, have you tried using the attribute hideFooter?
Example:

<template>
  <unity hideFooter=true src="static/Build/game.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js" ></unity>  
</template>

from vue-unity-webgl.

The above does not work for me... I'm still seeing the footer after adding hideFooter=true

from vue-unity-webgl.

Hello, it works now.
It sounds like you can pass some other parameters this way.

<template>
<unity v-bind="{hideFooter: true}" src="static/Build/game.json" unityLoader="static/Build/UnityLoader.js" ></unity>  
</template>

from vue-unity-webgl.

Just in mounted function , use this code, set it to be hidden:

mounted() {
    // hide fullScreen
    const fullScreenEl = document.querySelector('.fullscreen');
    fullScreenEl.style.display = 'none';
}

from vue-unity-webgl.