This example shows how to use Vue 3 with Essepage using modern ES module imports.
We import Vue directly from a CDN, define a small app with a single message in its data, and mount it to the #app element. The {{ message }} syntax is replaced with the actual value once Vue takes over.
To prevent a flash of raw template before Vue loads, we use the v-cloak directive along with a simple CSS rule to keep the content hidden until it’s ready.
Source Code
<head>
<style>
[v-cloak] { display: none; }
</style>
</head>
<div v-cloak id="app">
<h1>{{ message }}</h1>
</div>
<script type="module">
import { createApp } from 'https://esm.sh/vue@3.2.31/dist/vue.esm-bundler.js';
createApp({
data() {
return {
message: 'Hello World! 👋'
}
}
}).mount('#app');
</script>Play
Resource
https://vuejs.org
The Progressive JavaScript Framework