Hiding Uncompiled Vue Moustache Tags

There are situations where your Vue app template may be displayed before it’s fully compiled and therefore expose the uncompiled vue moustache template tags. In most situations this is not a problem but if you happen to get bitten by this issue, you can use v-cloack directive and CSS to hide the element until the template is rendered:

<div v-cloak>
  {{ message }}
</div>

and CSS to hide it:

[v-cloak] {
  display: none;
}

This is documented in Vue 3 docs and I’ve seen the implementations in the wild many times but for some reason I never seem to remember this when I need to. Maybe this note helps.