Vue Tutorials For Beginners

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

Installing Vue CLI

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

Last Touches

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

Up Next

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

Conclusion

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

Unique key

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.

The vue create command

First of all, go to the App.vue file and add the following HTML code under the application title:. In the above code snippet, we add a text input that allows users to add new tasks.

Computed properties versus methods

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.

Vue 3 Tutorial – Full Course 10 Hours 10 apps By Bitfumes

(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:. If we run the application and type anything in the input field, we’ll see the text appearing under the input field.

Vue 3 Tutorial For Beginners – Full Tutorial Course By The Earth Is Square

In the code above, we added

{{ newTask }}

in the HTML code, which represents the “newTask” field.

Vue 3 Composition API Introduction [Full Tutorial] By Academind

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. Before learning about handling user events, we need to learn about methods.

Vue 3 Crash Course – Building An App for Beginners By Vue Mastery

The reason is that we’ll use methods to handle those user events. All Vue instances have a property called methods, where we add all our methods. For example, we’ll add a button that allows us to add tasks. Thus, we encapsulate the logic for that button in a method, and we add it to the methods field.

Vue 3 with TypeScript Tutorial By The Net Ninja

Open the file Vue.app and add the following code after data():. The above code only adds a task if the user entered something in the input field and then clears the field. That is to prevent entering empty strings into our tasks list.

How To Get Started With Vue 3 By The Earth Is Square

Now, we can use the addTask() method as we would in any other application. We call the method, and the method will run, which is precisely what the next step is about. Be aware: The application will have two more methods:.

Vue.js Course for Beginners By FreeCodecamp

finish a task (which toggles a task on and off). However, I excluded them from the above code snippet for readability purposes, but you will see them in the gist.

List Rendering

VueSchool

You can see this gist with the complete code for App.vue up to this point. Now that you know what methods are about, it’s time to learn about handling user events. For instance, what happens when the user clicks on the Add task button? We can add an event listener to that button. In Vue, we can listen to events with the v-on directive.

When an event such as the user clicking a button is triggered, the application runs the specified method. Let’s see it in action. Go to the App.vue file and add a button under the input field. We should have the following code:. Observe the @click="addTask" code.

Vue Mastery

The v-on directive has a shorthand symbol, which is the @ symbol. Thus, instead of writing v-on:click, we can write it as shown above. Clicking on the Add task button triggers the method addTask(), which adds the task.

  • Therefore, with the v-on directive, we can listen to user events and call a specific method when they are triggered.
  • Figure 8: Our disabled button.
  • In Figure 8, you can see the newly created button.
  • At first, it’s disabled, but once we start typing, it works!

VueDose

See this gist with the complete code for App.vue up to this point. Another handy feature in Vue is computed properties. They’re similar to methods, except that they should not mutate data.

Scrimba

However, the computed properties are great for manipulating data and reusing it across our application. For this application, we’ll add two computed properties:. One that returns the number of all tasks. One that returns the tasks’ array in reverse order. We need it to show the latest tasks at the top of the list. Thus, in App.vue, add the following code under the methods property:.

Alligator.io

You may have noticed that the latest() computed property returns a new reversed array. As mentioned previously, a computed property should not mutate the existing data. Also, when we use computed properties, it’s important to use the return keyword. If we don’t return stuff, it won’t work! Now we can use the newly created properties.

LearnVue

In our template, find the “Add a new task” section and add the following line underneath:. The above line displays all the tasks in our list.

Components

Free Courses:

Creating Your First Vue 3 Project – A Vue Tutorial

Also, it determines when to use “tasks” or “task” based on the number of tasks. Lastly, go to the piece of code where we loop over the array of tasks and change task in tasks to task in latest.

The Vue 3 Master Class

This is how our code should look now:. We now loop over the latest, and we also have an “index” field now. The new field is used to show the position of the tasks in the list. Figure 9: Computed properties in action](computed-properties.png. Figure 9 illustrates the computed properties in action. You can see that it shows the total count of tasks, and it also displays the tasks in the order they were added.

Learn Web development using VueJS

Before moving further, I want to emphasize again that they’re similar but different. We should use methods to mutate data and use the computed properties for the presentation layer. Mutating data in the computed properties can result in bugs that are hard to spot. Check this gist to see how the App.vue file should look up to this point.

In Vue, we can bind HTML attributes to Vue data with the v-bind directive. That is, we can use dynamic values rather than hardcoded values for our attributes. Let’s make use of the attribute binding by adding a logo.

VueJS Fundamentals

Go to the Vue.app and add two new fields, logoURL and logoCaption. Our code should look as follows:.

Then, in the same file, add the following HTML img element above the application title:.

  • Observe the colons in the :src and :alt attributes.
  • They’re the shorthand of v-bind.
  • Thus, instead of writing v-bind:src, we write it :src.
  • Let’s say we use the logo in multiple places without having a separate component for it.
  • That means copy–pasting the same img tag in multiple locations.

Paid Courses:

Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex)

If we want to change the logo, we’ll have to make changes in many places. However, by using the attribute binding, we only have to make one change — in the Vue instance. The image below illustrates one example — with the img element.

However, we can use the attribute binding with other HTML elements too. For instance, we could use it with the href element as well. Figure 10 illustrates the image in action!

Check this gist to see how the App.vue file should look up to this point. In Vue, we can use dynamic CSS. That means whether a class is used or not is determined by a data property. An example from the to-do application would be to add the class strikeout when the task is finished.

Go to the App.vue file and add the :class attribute after the @click attribute.

  • See the code below:. Also, at the end of App.vue, add the following bit of CSS:.
  • So, what happens now?
  • In the above code, we added a user event as well — @click="finishTask(task)".
  • That means we can click on the task to finish it.
  • The method finishTask(task) toggles the finished field to true/false.
  • If the finished field is set to true, the strikeout class is added.
Vue JS 3 The Practical Guide

Dynamic CSS in Vue. Figure 11 illustrates what happens when we click on the task. Thus, the dynamic CSS is great for scenarios like this. It’s important to note that, if we want to add multiple dynamic classes, we can use the array notation. We can do it as follows:. Thus, this way, we can add multiple dynamic classes based on multiple conditions.

Moreover, we can add static classes in the array.

  • See simple-class above. Check this gist to see how the App.vue file should look up to this point.
  • Two things are left to finish the application:.
  • allowing the user to add a task by pressing the enter key on their keyboard.
  • making the delete button work.
Introduction to Vue 3

Open the file App.vue and find the input field. After you find it, add the following code:. You’ll notice @keyup.enter, which calls the method addTask when the user presses the enter key. Secondly, find the delete button in our application and add the following code:.

Vue JS Essentials with Vuex and Vue Router

Now it listens for a click event, and whenever the Delete task button is clicked, it will trigger the method removeTask.

  • It also passes the ID of the task, so it knows what task to delete.
  • Now we can enter tasks by pressing the enter key, and we can also delete tasks.
  • Check this gist to see how the App.vue file should look up to this point.
  • Well done for building your first application!
  • From here, you’re ready to dive deep into Vue components, Vue Router and other concepts!
  • You can find the whole application in this “final-app.vue” gist.
The Ultimate Vue 2 Crash Course – Learn by Example
  • If you want to try it out, simply copy all the code into your App.vue file.
  • Vue.js is a frontend framework that is optimized for progressive integration.
  • That means you can have a large app with only a couple Vue components integrated -- or you could start from scratch and work completely within the Vue ecosystem.
Hands-on Vue.js: Build a fully functional SPA

Another thing that sets Vue apart is the lower learning curve compared to a lot of frameworks. Instead of having to understand complex topics, if you know HTML, CSS, and JavaScript, you're already pretty close!

Like any framework, it adds a structure and utilities to your frontend so that your app is easier to extend as it grows, is more organized, and you don't have to "reinvent the wheel" as often. Vue is also really cool because it's ecosystem is really well integrated -- a lot of the utilities that would normally be 3rd party libraries are built by the Vue core maintainers, like Vue Router and Vuex.

Creating the Application with Vue CLI

Share This Article

Become a Ninja with Vue 3

Throughout this post, we'll explore the key features of Vue, and create an app together! Here's what we'll be building, though with some more interactive features. The like button will toggle from the heart outline to the red heart based on user clicks. Also, the character number will count down when someone types in the text box.

Vue – The Road To Enterprise

Go ahead and check out the HTML and CSS code above, we'll be building off of the HTML with our Vue code. For now, we'll use a Vue CDN -- we want a minimalist setup. In the future, you may want a more extensive environment, in which case you can use the Vue CLI.

Go to the settings button on Codepen, switch to the JavaScript tab, and search for Vue on CDNjs. This adds the Vue library to our project, so we can use all of the methods and features that Vue gives us. Now, we need to create a Vue instance and attach it to our HTML in order to fully integrate Vue!

Vue.js 3 Cookbook

Let's create a const that stores our Vue instance. We're going to pass an object when we create this Vue app, it'll have all our configuration and application logic for now. The first thing we're going to add to that object is el -- which is the element that we want to be the base of our Vue app. In this case the element with the status class. Then, we'll add our data.

To test this out, let's add the tweetText as data -- so where we have Hello World! right now will become a variable. Down the road we're going to make more tweets with different text, so it makes sense to make that piece of the tweet dynamic. When we want to add more dynamic data (or data that will change within our Vue app) we'll add more attributes to this data object.

Vue.js 3 By Example

Now, we can use our newly created data in our HTML and plug in the variables that way! If you've ever used Handlebars or another templating language, it's kind of like that. If you go to the hardcoded "Hello World!" in the HTML, we can now replace it with {{tweetText}} which will pull from our Vue data! Try to change your tweetText in Vue, and it'll change in your output as well!

Let's brainstorm for a second on what other data we have that will change within the course of our app. The heart will toggle between liked and unliked. Our characters remaining will decrease when we type in the. Let's go ahead and add attributes for those in our data object. We'll also make charactersRemaining dynamic in the HTML.

We'll hold off on the liked attribute for now, we'll come back to that in a second.

Other Useful Resources For Vue JS Developers:

Collections To Bookmark:

Conclusion:

Now that we have our data, we need to make it update based on user actions. We're going to add another attribute to our Vue object -- this one will store our methods.

We have two "actions" for our app -- toggling the like and changing the characters remaining number when the user types. Let's work on the character counting first. We'll add a function to our methods object first:. Let's think about the logic for this function: we need to count how many characters the user has typed into the textarea.

Then, we need to subtract that count from 280 (or our character limit). Let's create a data attribute for the comment text, and then update that every time the user types in the textarea.

v-model is a directive that syncs our data attribute with what the user has typed into the textarea.