A Beginner’s Guide to Vue 3

This content originally appeared on SitePoint and was authored by Catalin Pit

In this article, you’ll learn the fundamentals of Vue.js. Even though the article uses Vue 3, the fundamentals apply to older Vue versions too.

We’ll cover how to:

• create a Vue application with Vue CLI
• render lists
• use conditional rendering
• make use of dynamic CSS
• handle user inputs and events
• use methods and computed properties
• use HTML attribute binding

We’ll start by creating a skeleton application with the CLI.

Creating the Application with Vue CLI

The Vue command-line interface allows us to create and configure new Vue projects from scratch. That is, instead of adding packages and configurations ourselves, the CLI does that for us.

Let’s install the Vue command-line interface.

Installing Vue CLI

The tutorial assumes you don’t have Vue CLI installed on your machine. To install it, run the following command:

npm i -g @vue/cli

Alternatively, you can install it using Yarn as follows:

yarn global add @vue/cli

Once you’ve run any of the above commands, the installation starts, and it will take a few seconds or minutes. Once the installation finishes, you can create projects with the following command:

vue create your-project-name

The vue create command

Once we’ve run the vue create command, we’ll be prompted with a handful of questions. The purpose of these questions is to configure the project to suit our needs.

[caption id="attachment_185481" align="alignnone" width="1060"] Figure 1: The Vue CLI welcome screen[/caption]

Figure 1 above shows the welcome screen we get when we run vue create your-project-name. We then have to choose between three different options:

1. create a default Vue 2 project
2. create a default Vue 3 project
3. manually select features

The first two options will install a default Vue project for us. However, we don’t want a default project. For this tutorial, we’ll manually select the features for our project. Once we choose the third option, we’ll get a series of questions.

[caption id="attachment_185484" align="alignnone" width="1060"] Figure 2: Configuring a Vue project with Vue CLI[/caption]

Figure 2 above illustrates what we see when we choose the third option — manually select features. We can pick what features we need in our project, such as:

• adding unit and E2E testing to our project
• choosing a linter/formatter for the project
• adding options such as Vuex, TypeScript, Router and so on

After that, we’re prompted to choose a Vue version for our project. For this tutorial, I recommend choosing Vue 3, as pictured below.

[caption id="attachment_185486" align="alignnone" width="1060"] Figure 3: Choosing a Vue version in Vue CLI[/caption]

Lastly, we’ll need to answer more questions based on the features we select in the first step, as shown earlier in Figure 2.

Before going further, I want to make sure we’re on the same page:

1. Run vue create vue3-fundamentals in your terminal.
2. Choose “manually select features”.
3. Untick all features except Babel. For this tutorial, we don’t need any extra features.
4. Choose Vue version 3.
5. Choose “In dedicated config files” when it asks you where to place the config for Babel, and so on.
6. Don’t save the preset for future projects.

After following the above steps, the project structure should look like the one in Figure 4 below.

[caption id="attachment_185488" align="alignnone" width="1720"] Figure 4: Our Vue 3 project structure[/caption]

That’s it with the project configuration! Now we’re ready to work on it and learn Vue!

If you want to see a more comprehensive article about the CLI, check this Vue CLI article.

Preparing the Application

There are some things we don’t need in the application. First of all, go to src > components and delete the HelloWorld.vue component.

Now go to the App.vue file and remove all the references of HelloWorld from the file. Also, remove the image with the Vue logo. Lastly, modify the export default {} code block.

See the complete code of App.vue below:

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: 'My To Do App'
    }
  }
}
</script>

Set up a title property and display it in the template.

List Rendering

The first concept we’ll cover is how to render lists in a Vue application. However, before we can do that, we need a list.

Open the file App.vue and add the following array:

<script>
export default {
  data() {
    return {
      title: 'My To Do App',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false },
        { id: 2, name: 'Build a Vue application', finished: false },
        { id: 3, name: 'Write an article about Vue JS', finished: false }
      ]
    }
  }
}
</script>

In the above code snippet, we added an array of objects. Each object represents an individual task, and each task contains the following:

• an ID: we can identify each task by its unique ID
• a name: it describes what the task is about
• finished field: it represents whether the person finished the task or not

The next step is to loop over the array and render it on the page. In Vue, we can loop over lists with the v-for directive. The v-for directive has the form of task in tasks, where each task represents an individual item in the array, and the tasks represents the array.

We can see the v-for directive in action in the code snippet below:

<ul>
    <li v-for="task in tasks" :key="task.id">
      {{task.id}}. {{ task.name }}
    </li>
</ul>

We can render each item or task using the Mustache notation. We use the Mustache notation by using those double curly braces.

At the moment, it only displays the ID and the name of the tasks. But we could also show whether it’s finished or not as follows:

{{ task.id }}. {{ task.name }} - {{ task.finished}}

However, we’ll use that field for other purposes later in the tutorial. If we save the code and run the application, we should see something as follows:

[caption id="attachment_185490" align="alignnone" width="959"] Figure 5: List rendering in Vue with the v-for directive[/caption]

You can see that the tasks are rendered on the page, and each one has an ID and a name.

Unique key

You may have noticed the following bit of code:

:key="task.id"

It’s recommended we use the :key attribute when we loop over lists. The reason is so that each DOM element has a unique key. Thus, Vue can track each node’s identity to reuse and reorder existing elements. As a result, it also improves the performance of the application.

Usually, we use the item’s ID for the :key attribute, like in the above example.

Check this gist to see how the App.vue file should look up to this point.

Conditional Rendering

There are occasions when we want to display something on the page based on a specific condition. Thus, we can use the v-if directive to render a piece of code based on a condition.

The block of code is rendered only if the expression provided returns a truthy value. For instance, in the application we’re building in this tutorial, we might want a Delete task button to show after we finish a task. Thus, we can delete a task when we’re done with it.

Let’s add the Delete task button. Go to the App.vue file and add the following code in the unordered list:

<ul>
    <li v-for="task in tasks" :key="task.id">
        {{ task.id }}. {{ task.name }}

        <div v-if="task.finished">
            <button>Delete task</button>
        </div>
    </li>
</ul>

You can see the new div with the v-if directive. Its purpose is to check if the task is finished. If the task is completed, it shows the delete button. If the task isn’t finished, the button is hidden.

Go and change the finished field on any task from the task array to true. After that, refresh the application, and we should see the delete button.

If you followed all the steps, this is what you should see:

[caption id="attachment_185492" align="alignnone" width="973"] Figure 6: Vue conditional rendering[/caption]

The v-if directive is handy when we want to render something based on a condition.

Before moving on, it’s important to note that we can use v-else-if and v-else too. For instance, we could have something similar to this:

<ul>
    <li v-for="task in tasks" :key="task.id">
        {{ task.id }}. {{ task.name }}

        <div v-if="task.finished">
            <button>Delete task</button>
        </div>
        <div v-else-if="task.edit">
            <button>Edit task</button>
        </div>
        <div v-else>
            <p>No button</>
        </div>
    </li>
</ul>

You can see how powerful conditional rendering is. However, for this tutorial, we’re using only the v-if.

Check this gist to see how the App.vue file should look up to this point.

Handling User Input

The next step is to handle the user input. First of all, go to the App.vue file and add the following HTML code under the application title:

<h2>Add a new task</h2>

<div>
   <input type="text"
     v-model="newTask"
     placeholder="Add a new task"
   >
</div>

<div v-if="newTask.length > 0">
   <h3>New task preview</h3>
   <p>{{ newTask }}</p>
</div>

In the above code snippet, we add a text input that allows users to add new tasks. Also, you’ll note the v-model directive. The v-model directive enables us to create two-way binding between the input field and the application state. (You can learn more about v-model in “Understanding the New Reactivity System in Vue 3”.)

Before we can try out the code, add the newTask field in the Vue instance as follows:

return {
      title: 'My To Do App',
      newTask: '',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false },
        { id: 2, name: 'Build a Vue application', finished: false },
        { id: 3, name: 'Write an article about Vue JS', finished: false }
      ]
    }

If we run the application and type anything in the input field, we’ll see the text appearing under the input field.

[caption id="attachment_185494" align="alignnone" width="973"] Figure 7: Vue handling user input[/caption]

In the code above, we added <p>{{ newTask }}</p> in the HTML code, which represents the “newTask” field. Thus, it gets updated and rendered on the page whenever we add anything in the input field. It appears under the input field.

Check this gist to see how the App.vue file should look up to this point.

Continue reading A Beginner’s Guide to Vue 3 on SitePoint.

This content originally appeared on SitePoint and was authored by Catalin Pit