CSS is breaking in vuejs on reload of page-CodePudding

when i reload the page the css is breaking in vuejs enter image description here

I tried to change the css from my app.vue but nothing happened it is having the same problem..

CodePudding user response：

To avoid this, you can use v-cloak. This directive is used to hide an element until the Vue instance has finished compiling. This is useful when dealing with dynamic content that is generated by the Vue instance, and we want to avoid any flickering or jumping of the page as the content is being loaded.
Check the official docs.

const app = Vue.createApp()

app.mount('#app')

#app[v-cloak] {
  display: none
}

section {
  width: 200px;
  height: 200px;
  background-color: lightcyan
}

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app" v-cloak>
  <section></section>
</div>