I have a Django template that I'm trying to render with VueJs using CDN. The problem is when the page is loaded, i see the raw code of Django with the delimiters before it get rendered with VueJS. It takes less that a sec.
I have an API call (using Fetch) that retrieve some data before displaying them and I put that in mounted() function. The delay is almost 0.6sec and we can see Django render before vuejs render the page.
Then I change mounted() to beforeMount(). I now see the Django render from time to time but it's much better because often, vue render comes first.
Is there a better way to solve this? I'm using CDN, and I didn't want to get into server-side rendering for this project.
The directive v-cloak solve it.
<div id="#app">
<div v-cloak>
[[ message ]] // Vue delimiters for django.
</div>
</div>
with the style
[v-cloak] {
display: none;
}
Juste make sure to add the directive inside of the main #app div
More to it here Hiding vue.js template before it is rendered