CodePen Embed - v-cloak

<div id="app" v-cloak>
  <h1>{{ title }}</h1>
  <p>{{ message }}<p>
</div>

<button onclick="load()">Load</button>

html, body {
  display: grid;
  grid-gap: 1rem;
  justify-content: center;
  align-content: center;
  
  height: 100%;
  font-family: sans-serif;
}

[v-cloak] > * {
  display: none;
}

[v-cloak]::before {
  content: 'Loading...';
  margin: 1rem;
}

function load () {
  Vue.createApp({
    data: function () {
      return {
        title: 'Hello, World',
        message: 'Welcome to my site'
      }
    }
  }).mount('#app')
}

This Pen is owned by IMD on CodePen.

See more by @IMD on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://unpkg.com/vue@next