Truco de Vue.js #1: Esconder tus directivas de Vue antes de que esté listo

¿Tus usuarios tienen conexión lenta? ¿Vue.js no se definió correctamente? ¿Detestas el DOM pre-render?

Así se vería Google antes de cargar Vue.js (si lo usara…)

Pues te tengo la solución a tus problemas: ¡v-cloak!

En la lista de directivas de Vue.js encontramos v-cloak, pero puedo asegurar que muy pocas personas le prestan atención.

Lo único que hace esta directiva es desaparecer. Sí, desaparecer y ya. Cuando Vue.js es invocado se encarga, entre otras cosas, de quitar todos los v-cloak que haya dentro del elemento HTML que inicialices.

Ten en cuenta que v-cloak no se pone por defecto en todos lados, tú debes ponerla y sólo es válido en elementos dentro del que inicializas, no aplica sobre él mismo.

<div id="super-app">
    <div class="results" v-cloak>
        <p>About {{numResults}} results. ({{responseTime}} seconds)</p>
    </div>
    <p class="tip">
        Tip: <span>Search for <em v-cloak>{{language}}</em> results only</span>. You can specify your search language in <a href="">Preferences</a>
    </p>
</div>

<script>
    let superVueApp = new Vue({
        el: '#super-app',
        .
        .
        .
    })
</script>

<p>About {{numResults}} results. ({{responseTime}} seconds)</p>

</div>

Tip: <span>Search for <em v-cloak>{{language}}</em> results only</span>. You can specify your search language in <a href="">Preferences</a>

</p>

</div>

let superVueApp = new Vue({

el: '#super-app',

})

</script>

Si esto lo combinas con una regla de CSS puedes ocultar todos los elementos que no estén listos.

[v-cloak] {
  display: none;
}

[v-cloak] {

display: none;

}

¡Voilá! Con esta solución super-simple te olvidas de tener HTML que no esté listo sin pegarle al performance de tu app.

Si tienes dudas sobre Vue.js o cosas raras que te gustaría hacer y no sabes cómo, déjame un comentario para tenerlo en cuenta para los próximos Trucos de Vue.