How to avoid having django template display before VueJS render

Question

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.

Answer 1

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