Vuejs codes display curly braces at a glimpse when switching page, before a new page loaded

Question

i understand v-cloak is used to display nothing when a new page is loaded.

in my rails app, when i try to switch page (i am using vue component in Rails View), there is a short glimpse of Vuejs codes displaying curly braces before another new page is load. i am entirely baffled and not sure if this is turbolink related as there is no error message found in browser console, or in the rails git logs.

this short glimpse of Vuejs displaying curly braces before another page is loaded, is really annoying, can anyone help on this?

Answer 1

v-cloak is used to do this.

official API：

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

tips: written [v-cloak] in @import loaded css file can't work for this problem. another way: around target tags.