In the latest version of Vue.js (Vue 3), you can write “Hello, World!” in multiple ways. Here are the most common methods:
1. Using Vue with CDN (Basic Setup)
You can include Vue via a CDN and write a simple Vue app directly in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World in Vue 3</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello, World!"
};
}
});
app.mount("#app");
</script>
</body>
</html>
2. Using Vue with a Component-Based Approach (Vue SFC - .vue file)
If you are using Vue with a build system (like Vite), your App.vue file will look like this:
<script setup>
const message = "Hello, World!";
</script>
<template>
<h1>{{ message }}</h1>
</template>
<style>
h1 {
color: blue;
}
</style>
3. Using Vue with a Composition API
If you prefer to use the Composition API, here’s an example:
<script>
import { ref } from "vue";
export default {
setup() {
const message = ref("Hello, World!");
return { message };
}
};
</script>
<template>
<h1>{{ message }}</h1>
</template>
4. Using Vue with an Options API (Older Syntax)
If you prefer the Options API, you can write it like this:
<script>
export default {
data() {
return {
message: "Hello, World!"
};
}
};
</script>
<template>
<h1>{{ message }}</h1>
</template>
Which One Should You Use?
- If you’re quickly testing, use CDN-based Vue.
- If you’re building a full app with Vue, use SFC (.vue files).
- If you like the new Vue 3 style, use Composition API.
- If you prefer Vue 2’s style, use Options API.
January 30, 2025
How to write Hello World in Javascript
January 30, 2025
