1

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.

karel
  • 5,489
  • 46
  • 45
  • 50
Romain BOBOE
  • 367
  • 3
  • 10
  • Please, show what exactly you mean. For undesirable markup output, cloaking can be used (`body` or some element is output with CSS class that has `display:none`, then a class is removed in JS), but the primary problem is that server side code shouldn't leak outside server app at all, it's unsafe – Estus Flask Oct 30 '21 at 07:51
  • Thanks Estus, actually i just found the answer going through the doc and also here back on stackOver https://stackoverflow.com/questions/42262007/hiding-vue-js-template-before-it-is-rendered – Romain BOBOE Oct 30 '21 at 08:08
  • I see, so you mean Vue delimiters. Then it's ok, v-cloak it is. – Estus Flask Oct 30 '21 at 08:28

1 Answers1

2

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

Romain BOBOE
  • 367
  • 3
  • 10