Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to create our first project with Vue 3.
Installation
We can install the Vue Devtools with by installing the browser extension according to the instructions at https://github.com/vuejs/vue-devtools#vue-devtools.
A standard Electron app is also available.
It can be used to debug our Vue apps.
To install the Vue package, we can run:
npm install vue@next
to install the NPM package.
Vue CLI is also available for create our Vue project.
We can run:
yarn global add @vue/cli@next
or
npm install -g @vue/cli@next
to install the Vue CLI globally.
Vite is a web dev build tool that lets us serve our code faster with the ES module import approach.
We can run:
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
or
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
to create a Vue app with Vite, install the packages, and run the app.
We can also include Vue 3 as script tag.
For instance, we can write:
<script src="https://unpkg.com/vue@next"></script>
to add the script tag.
Get Started
We can get started by creating our first Vue app.
To do that, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const app = {
data() {
return {
message: "hello world"
};
}
};
Vue.createApp(app).mount("#app");
</script>
</body>
</html>
to create a simple Vue app.
In the head tag, we add our Vue package.
We add our template in the div with ID app .
Then we create our app object with the data method to return our data.
We pass the object to the Vue.createApp method and call mount with a CSS selector to let us mount the app.
How we should see ‘hello world’ displayed on the screen.
This is because the text is interpolated from the data as indicated by the double curly braces.
In addition to interpolating text on the template, we can also use the v-bind attribute on the template to display the text.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-bind:title="message">{{message}}</div>
</div>
<script>
const app = {
data() {
return {
message: "hello world"
};
}
};
Vue.createApp(app).mount("#app");
</script>
</body>
</html>
The v-bind directive lets us set a dynamic value for an element’s attribute.
Now when we hover over the ‘hello world’ text, we should see the same thing displayed.
Handling User Input
We can use the v-on directive to handle user input.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>{{ state }}</p>
<button v-on:click="toggle">toggle</button>
</div>
<script>
const app = {
data() {
return {
state: true
};
},
methods: {
toggle() {
this.state = !this.state;
}
}
};
Vue.createApp(app).mount("#app");
</script>
</body>
</html>
We have the v-on:click directive to let us listen to clicks on an element.
The value we passed in as the value of the directive is the method we’ll call when we click on th button.
It refers to the toggle method to toggle this.state to the opposite value.
Now when we click the toggle button, we’ll see the state on the template toggle between true and false .
Conclusion
We can get started with Vue 3 with a script tag or a package.
Vue Devtools let us debug our Vue app easier.
Once we have the Vue framework package added, we can create simple apps with it.
v-on lets us listen to events and v-bind lets us set attributes.
