Beginner LevelVue JS
How does v-cloak prevent Flash of Unstyled Content (FOUC) in CDN-based Vue apps?
❓ Interview Prompt: Explain v-cloak directive, preventing raw {{ mustache }} template flashes during CDN script loading.
When building lightweight applications using Vue via CDN script tags (without a build step), the browser renders raw HTML before Vue finishes loading, causing users to briefly see raw '{{ message }}' mustache strings (Flash of Unstyled Content / FOUC).
'v-cloak':
Keeps the element hidden until the associated Vue instance finishes compilation:
1
Add 'v-cloak' attribute to root app element: '<div id="app" v-cloak>'.
2
Add CSS rule: '[v-cloak] { display: none; }'.
3
Vue removes the 'v-cloak' attribute when compilation finishes, smoothly revealing the rendered UI!
Code Implementation Example
html
<style>
/* Hide element while Vue script is downloading/compiling */
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ message }} <!-- Raw mustache never flashes! -->
</div>💡Hiding raw template interpolation during CDN load using v-cloak.
🎯 Interview Key Takeaway
v-cloak hides uncompiled Vue template markup until the Vue instance finishes compilation.
#v-cloak#FOUC#Templates#Beginner
Back to all Vue JS Questions→