Posted on  by admin

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. 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. 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.

Soft Launch of Vue 3 #

Let’s install the Vue command-line interface. The tutorial assumes you don’t have Vue CLI installed on your machine. To install it, run the following command:. Alternatively, you can install it using Yarn as follows:.

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:.

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. Figure 1: The Vue CLI welcome screen.

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:. create a default Vue 2 project. create a default Vue 3 project. 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. 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:.

Version Switch Details #

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. Figure 3: Choosing a Vue version in Vue CLI. 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:. Run vue create vue3-fundamentals in your terminal. Choose “manually select features”. Untick all features except Babel. For this tutorial, we don’t need any extra features.

Choose Vue version 3. Choose “In dedicated config files” when it asks you where to place the config for Babel, and so on. 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.

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.

From a Library to a Framework #

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:. Set up a title property and display it in the template. 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:. 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:.

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

Dynamic CSS

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:. 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:. Figure 5: List rendering in Vue with the v-for directive. You can see that the tasks are rendered on the page, and each one has an ID and a name. You may have noticed the following bit of code:.

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.

Last Touches

Check this gist to see how the App.vue file should look up to this point. 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:.

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:. Figure 6: Vue conditional rendering.

Preparing the Application

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:. 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. 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:.

Up Next

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps - Start monitoring for free.