Vue.js 3: First Steps

Code-named “One Piece,” Vue 3.0 is the latest version of one of the most popular front-end frameworks.

Vue.js 3.0. Image Credits: JavaScript Weekly

Sept 18th, 2020, came bearing the good news of the release of Vue 3.0.

The Vue.js team announced its release via its official Twitter account:

A tweet from Vue.js’s official Twitter account

I was excited to try it out and decided to create a small Todo app.

In this article, I’ll walk you guys through the process of creating a web app using Vue 3.0.

But before we start, let me give you a glimpse of what we are about to create:

The Todo app created using Vue 3.0. Image Credits: Pratik Chaudhari (Author)

Now that you have got a visual clue of how it’s going to look and how it’s going to function, let’s dive into the code.

Step 1.

Setting up your app to use Vue 3.0

We won’t be using npm, the popular JavaScript package manager, here to keep things simple.

Instead, we’ll use the good ol’ <script> tag to import vue.js into our app directly from a CDN:

<script src="https://unpkg.com/vue@next"></script>

Note the @next in the above code. It is used to indicate to unpkg.com that we want the latest version of vue.js.

If you omit the @next, unpkg.com will provide you with vue 2.6.12, the current LTS version of Vue.js.

Step 2.

Importing other third-party libraries

The only third-party library that I have used is the Materialize CSS.

This isn’t really necessary, but it gives the app a nice swanky look :)

So let’s import it:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

As you can see, we need two imports here:

1. The Materialize CSS file
2. The Materialize JS file

The JS file is required for displaying toasters and tooltips provided by the Materialize CSS.

Step 3.

Creating the HTML template

We’ll need a form with two input fields: one for the title and one for the description. We’ll also need a button that will allow the user to submit a todo item to the app.

Here’s the code:

(I’m embedding the code using GitHub’s gist feature here as adding the raw text for code of this length directly into the article will make it hard to read)

A snippet from the index.html file of the Todo app

We’ll also need a table to display all the todos that the user has added.

Here’s how we design it:

A snippet from the index.html file of the Todo app

Step 4.

Creating the app.js

Let’s create the app.js, which will bring our app to life:

The entire app.js file of the Todo app

Once we glue all the above code together, our app will begin to function, as we’d seen in the gif at the beginning of the article.

In case you want to see a live demo of this app (and maybe change its code and play with it), head over to the Codepen below, where I’ve uploaded all the code:

Codepen for Todo app.

That’s all for this article. I hope you guys liked it!