Tengo una plantilla de Django que estoy tratando de renderizar con VueJs usando CDN. El problema es que cuando se carga la página, veo el código sin procesar de Django con los delimitadores antes de que se procese con VueJS. Se tarda menos de un segundo.
Tengo una llamada a la API (usando Fetch) que recupera algunos datos antes de mostrarlos y los pongo en la función montada(). El retraso es de casi 0,6 segundos y podemos ver el renderizado de Django antes de que vuejs renderice la página.
Luego cambio 'mounted()' a beforeMount() . Ahora veo el renderizado de Django de vez en cuando, pero es mucho mejor porque a menudo, el renderizado de vue es lo primero.
¿Hay una mejor manera de resolver esto? Estoy usando CDN y no quería entrar en la representación del lado del servidor para este proyecto.
La directiva v-cloak lo resuelve.
<div id="#app"> <div v-cloak> [[ message ]] // Vue delimiters for django. </div> </div>con el estilo
[v-cloak] { display: none; }Solo asegúrese de agregar la directiva dentro del div principal #app
Más aquíOcultar la plantilla vue.js antes de que se represente