[Vuejs]-Skeleton page with v-cloak: how to target loading div with css ? Vue

You seem to be expecting the content your initial element to be found in the template of app root element. When using $mount() function, Vue completely replaces the target element with the template of the mounted element.

This replacement is somewhat masked by the fact that, out of the box, the index.html contains a <div id="app"> which gets replaced by the <div id="app">...</div> in your App.vue template.

But they’re actually not related (and not the same element). If you changed the id of the one in index.html you’d need to change the target el in main.(js|ts). And obviously, you could change the id of the one in App.vue as well.

Now, to solve your issue, you could simply place v-cloak on the div in your App.vue. From what you’ve shown so far, that should make it work as expected.

For more complex use cases (i.e: if you wanted to trigger a particular event bound to the initial element) the way to go would be to wrap the initial placeholder in a parent, bind to the parent and, later on, in Vue, target the parent with this.$el.closest('.some-class') or with this.$el.parentElement() to access the binding.

If you still can’t get the expected result, please create a mcve (you could use codesanbox.io) and describe in detail what is the expected behavior.

To make your headache smaller till you find proper vue solution, you can grab loader by id and when Vue instance mounts – give display none

export default {
        mounted() {
            document.querySelector('#app__loading').style.display = 'none';
        },
}