There’re a few ways to create a hello world app with Vuejs.
With the Vue CLI, we can install it by running:
npm install -g @vue/cli
Then we run it as follows:
vue create my-project
Where my-project can be replaced with the project name of our choice.
We keep all the default choices when asked when we go through the wizard.
Then in App.vue, we write:
<template>
<div id="app">hello world</div>
</template>
<script>
export default {
name: "App"
};
</script>
We can also write:
<template>
<div id="app">{{msg}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
msg: "hello world"
};
}
};
</script>
We can also use the script tag version as follows:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
new Vue({ el: "#app", template: "<div>hello world</div>" });
</script>
</body>
</html>
We can also put the ‘hello world’ as a string in the data property as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
new Vue({
el: "#app",
data: {
msg: "hello world"
},
template: "<div>{{msg}}</div>"
});
</script>
</body>
</html>
We display the msg property’s value in the template.
