I like to work with Vuejs, and today I tried to use the next version of Vuejs: Vue3.
My first question was: how can I create a new Web Application with Vue3 and the right npm dependencies?
To do that, I used Vite as build tool. Vite is an amazing web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. Vite uses Vue3. So if we use Vite we have an amazing fast build tool and we have all vue3 dependencies ready to use.
In order to install Vite and your sample application based on Vue3:
npm init vite-app rollthedice
cd rollthedice
npm i
npm run dev
Now you can open your browser at: http://localhost:3000/
The demo application made with Vue 3.0 and Vite
Yes, you are running a Vue3 web application.
Now I would like to create a very simple “Roll the Dice” web application.
The user can click a button in order to generate a random number (from 1 to 6) and update the text where the result is shown and the list of the previous rolls. Very simple but useful to walk through on the basic stuff of Vue3, start to understand the main differences with Vue2 and look at the CompositionAPI.
So now let’s jump on the code.
The command “npm init vite-app rollthedice” created for you a basic skeleton of Vue3 web application. Now we will focus on 2 files.
The basic structure of your Vue3 web application
The main goal of App.vue file is to load the component.
<template>
<!-- ##001: use the component in template -->
<RollTheDice />
</template>
<script>
// ##002: import the component
import RollTheDice from './components/RollTheDice.vue'
export default {
name: 'App',
components: {
// ##003: declare the component
RollTheDice
}
}
</script>
So, as you can see, no differences with Vue2.
Let’s create the new component file: src/components/RollTheDice.vue.
The component file is a little be longer than the App.vue.
Let me split in two part. The first one is the template part, where we will use some variables and functions that we will cover in the script section.
So, two part: one is template and the last one is script. Both are included in the same file RollTheDice.vue.
The first part of the file is for the template:
<template>
<h1>Number is: {{ dice }}</h1>
<div>Number of rolls: {{ rolls.length }}</div>
<div>Total: {{ total }}</div>
<button @click="roll()">Let's roll the dice</button>
<button @click="restart()">Restart</button>
<ul>
<li v-for="(t, index) in rolls" :key="index">
{{ t }}
</li>
</ul>
</template>
As you can see we are using:
<script>
// ##001 : import ref and computed from vue3
import { ref, computed } from "vue";
export default {
name: 'RollTheDice',
// ##002 : implement setup function
setup() {
// ##003 : declare and initialize 2 reactive variables dice and rolls
const dice = ref(0);
const rolls = ref([]);
// ##004: implement roll function (inside setup() )
function roll() {
dice.value = Math.floor(Math.random() * Math.floor(5)) + 1;
rolls.value.unshift(dice.value);
}
// ##005: implement restart function (inside setup() )
function restart() {
dice.value=0
rolls.value = [];
}
// ##006: define a computed function (total)
const total = computed(() => {
let temptotal = 0;
for (let i=0 ; i< rolls.value.length; i++) {
temptotal = temptotal + rolls.value[i]
}
return temptotal;
});
// ##007: expose to the template all stuff (variables, functions, computed etc)
return { dice, rolls, total, roll, restart };
}
}
</script>
That’s all for now. So if you have your “npm run dev” you have an hot reload provided by Vite so go to your browser, go to http://localhost:3000/ and take a look your new Vue3 web application.
Roll the dice
This is a list of useful links:
I’m exploring Vue3 so if you have some feedback, please let me know in the comments. Thank you!
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Learn Vue.js from scratch 2018
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Vue.js Tutorial: Zero to Sixty