Prerequisites
- Basic HTML, CSS, JS knowledge.
Step-by-Step
- Open a text editor (e.g., VS Code) and create
index.html.
- Add Vue via CDN:
<!DOCTYPE html>
<html>
<head>
<title>Hello Vue</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return { message: 'Hello Vue!' };
}
}).mount('#app');
</script>
</body>
</html>
- Open
index.html in browser. Edit message to see reactivity.
Try Composition API variant:
const { createApp, ref } = Vue;
createApp({
setup() {
const message = ref('Hello Vue!');
return { message };
}
}).mount('#app');
