¿Cómo evitar que aparezcan las llaves de Vue al cargar la página?
En mis aplicaciones de Vue.js que no usan la CLI normalmente tengo pequeños templates del estilo:
```
<div class="app">
{{ title }}
// Más intrucciones de Vue por aquí
</div>
```
Sin embargo, en conexiones lentas se ve raro el efecto de que primero aparezca la sintaxis de Vue y luego ya se vea bien "renderizada" mi app.
¿Cómo podría mejorar ese cargado incial?
Saludos.
Hola Ady, buenas tardes, esa es una excelente pregunta y de hecho hay una solución muy sencilla y elegante.
Hay algo que se llama **v-cloak** que es un directiva que Vue trae por defecto; procederíamos de la siguiente manera:
### Paso 1
En alguno de tus archivos CSS agrega esta regla:
```css
[v-cloak] {
display: none;
}
```
### Paso 2
En tu template de aplicación vamos a poner la directiva:
```cs
<div class="app">
<div class="container" v-cloak>
{{ title }}
</div>
// Más intrucciones de Vue por aquí
</div>
```
Y listo, con estas simples instrucciones evitarás ese detalle que parece insignificante pero impacta en la experiencia de tus visitantes.
Te recomiendo un artículo escrito por Enrique D. que tenemos aquí: [Truco de Vue.js #1: Esconder tus directivas de Vue antes de que esté listo](https://blog.webtraining.zone/truco-de-vue-js-1-esconder-tus-directivas-de-vue-antes-de-que-este-listo/)
Saludos.
hola eso no hace la carga mas lenta ? en verdad eso no es una socilcion react es un poco mejor en ese aspecto aunque vue.js es bastante opensource pero no quita que la pagina tarde en cargar, creo que esto puede ser un problema de angular 2 y vue.js que los podria tirar al piso :D
Que tal @gustavo
Vue puede ser integrado de múltiples formas, en esta pregunta en especial @Adriana se refería a cuando se hace la compilación y *rendering* directamente en el navegador web, sin utilizar nada como Webpack + Babel.js.
Cuando se tiene Webpack + Babel, esta fase de compilación se hace "offline" y lo único que pone en el servidor web es el "bundle" resultante (como lo harías con React si usas create-react-app).
Saludos.
Por favor inicia sesión para participar en esta pregunta
Esta pregunta fue publicada hace hace 6 años por Adriana y tiene 3 respuestas.