Durante la carga de una aplicación web con Vue.JS suele ocurrir que se muestran por un instantes partes de la interfaz de usuario y etiquetas {{}} que no queremos que se muestren.

Una forma sencilla es utilizando la directiva de Vue.JS v-cloak

Actualización: Este y este enlace describen otras formas de convertir esto en un no-problema.

El siguiente código adaptado de un artículo en Medium muestra una forma sencilla. Simplemente definimos un estilo para la directiva [v-cloak] y luego aplicamos la directiva en nuestra app de Vue.JS

Esta directiva es aplicada al elemento que la contiene mientras este no haya sido compilado por Vue.JS

<style>
[v-cloak] > * { display:none; }
[v-cloak]::before { content: "loading..."; }
</style> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app" v-cloak>
  <h1>Very Simple App</h1>
  <p>
    ¡Hola, {{name}}!
  </p>
</div>
<br>
<button onclick="loadApp()">Load App</button>
<script>
function loadApp () {
	new Vue({el: '#app', data: {name: 'Joselito'}})
}
</script>

Haz clic acá para ver la implementación funcionando

— Fin —

 6,469 total views,  3 views today