Kieling

v-cloak VueJS

26/03/2019 • Raphael Kieling Tondin

v-cloak é um diretiva que ficará atrelada em todos os componentes enquanto eles não estiverem finalizados. Infelizmente ele não vem por default e precisamos colocar na mão. Os exemplos foram retirados daqui.

O problema

Quando o VueJS não é instanciado não carrega ele vai acabar mostrando o conteúdo html sem lógica mesmo. Isso pode acontecer em outros caras como o Twig do symfony onde existe um problema de renderização bem visível, onde o componente inicia com html e espera o VueJS vir trabalhar nele.

Vamos simular um problema, forçando um renderização atrasada.

Resolvendo

Vamos adicionar um css para esconder ele enquanto estiver em processo de renderização:

[v-cloak] > * { display:none }
[v-cloak]::before { content: "loading…" }

Finalizando

  • O v-cloak é apenas um classe no final de contas, utiliza seletores css a vontade.
  • Não utilize ele para aguardar requisições ou estado de objetos, o v-if cumpre bem o seu papel.
  • Não adicione em atributos como img provavelmente a imagem irá carregar bem depois.

Referências