Learn Vue: Introduction to Vue.js

Vue.js is a JavaScript Framework for building Frontend Applications. It is easy to learn, in fact, if you already know HTML, CSS, and JavaScript, then you’re halfway with learning Vue, this is because, Vue.js builds on top of the standard HTML, CSS, and JavaScript, and this makes building frontend applications with Vue easy.

Features of Vue.js

Vue.js is one of the most popular frontend frameworks, let's look at some of the features that make Vue unique.

• Declarative rendering: Vue template syntaxes allow us to bind our logic directly to our Template.

• Reactivity: With Vue reactivity, we can track the state of our JavaScript, and update the DOM automatically anytime changes are made in our code.

• Composable: With Vue.js Composable, we’re able to abstract a piece of code that is shared across our components, thereby reducing code redundancy.

• Options API and Composition API: With Vue.js, you have the freedom to choose between the Options API and the Composition API, and use the one that better serves your need.

These are just a few features of Vue, along the way, as you start learning and building with Vue, you will discover more amazing features and why Vue stands out from other frontend frameworks.

Prerequisites

To get the most out of this guide, it's important that you have the following:

• Understand the basics of HTML, CSS, and JavaScript.

• Node.js is installed on your Machine.

• Visual Studio Code or any other text editor is installed on your Machine.

If you’re like me, you wouldn’t want to go through all the stress of installing new software applications before coming back to read the guide. If so, then the Vue Playground is a good alternative. The Vue playground allows us to write and execute any piece of valid Vue.js code. So, if you don’t want to install any software at the moment, then the Vue playground is the way to go.

Setup

I'll be using the Vue.js playground for this guide, but if you prefer using your local dev environment, then run the below command to scaffold a new Vue project with vite:

> npm init vue@latest

The above command installs and executes create vue (the official build tool for Vue). You'll be prompted to answer a series of questions. Use the down or up arrow key to select between yes and no, select no if you're unsure of an option, you can always install them later.

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

cd to the project directory by running the command cd <your-project-name>, run npm install to install all the packages and finally run npm run dev to kickstart the server.

Basic Vue File

Vue.js is used building Single Page Applications (SPAs), SPA means that the app is contained in a single HTML file with different sections.

As a beginner, it’s important to understand the structure of a Vue file. In this section, we’ll go through a basic Vue file and see how it is structured.

A Vue file has a Template section, a Script section, and a Style section with the .vue extension. This is unlike other frontend frameworks, like Angular, where the template is a separate file, and the style and script are also separate files. Vue.js combines the template, script, and style into a single file called component, this makes developing SPA's with Vue simple. You can easily perform any style, template, and script change within a Single-File.

<script setup>
Import { ref } from 'vue'
const myName = ref("Agu Wisdom aka KingstonCodes ")
</script>

<template>
    <h1> {{myName}} </h1>
</template>

<style>
    h1 {
         font-size: 24px;
    }
</style>

The <script></script> contains the logic of the applications, the <template></template> contains the view of the application, and the <style></style>, just as the name suggests, contains the styles of the application.

A Vue.js file on its own is referred to as a component, and we can have as many components as we desire in our Vue application.

Note: _even though we have the freedom to create as many components as we desire in our application, it is also important that we create components only when they are needed.

Data Binding

Data binding is one of the most important features of Vue.js, it is simply the communication between the component's view (Template) and the component's logic (script).

The simplest form of data binding in Vue is string interpolation.

We have three types of data binding in Vue.js; String Interpolation, Directives, and Modifiers.

String Interpolation

String Interpolation is the simplest form of data binding in Vue, it is the way we display texts, strings, or any expression defined in our script. We perform string interpolation in Vue.js by placing the variable or expression we want to interpolate between two curly brackets inside our template. Let’s see this in action:

<script setup>
Import {ref} from 'vue'
const myName = ref("Agu Wisdom")
 </script>

<template>
    <h1> {{myName}} </h1>
</template>

Inside the template, we're using double curly braces {{ ... }} to interpolate the value of the myName variable. This means that the value of myName will be binded to the <h1> element, and any changes to myName will reflect in the browser.

We can also perform any valid JavaScript expression in our template with the help of string interpolation. Below is a basic example:

<template>
  <h1>
     {{ 5 + 5 }}
  </h1>
</template>

Directives

Directives are special attributes in Vue, they are used to manipulate the DOM and control the behavior of our application. Let's see an example of directive with the v-if directive:

<script setup>  
import { ref } from ‘vue’
const isName = ref(true)
</script> 

<template>
<h1 v-if=”isName”> My name is Wisdom </h1>
</template>

The v-if directive is like the traditional JavaScript if statement. In the example above, we are using v-if to tell Vue to only display My name is Wisdom to the browser only when isName is true.

Just as we have the if, else if, and else in JavaScript, we also have v-if, v-else-if, and v-else in Vue. We can use them to control the flow of our Vue application.

Directives are part of the core features of Vue.js, as they help control and shape the flow of our application.
Read more on Vue directives

API Styles

In Vue.js, we have two ways in which we can write our component; we can either use the Options API or the Composition API. I know you are probably wondering, What is Options API? What is Composition API? No worries, we’ll explain and see the differences in a bit.

Options API

The Options API is the old and traditional way of writing Vue.js, mostly used in Vue 2, it allows us to write our component’s logic using a set of options, such as the data, methods, and computed properties.

Here is an example of the Options API:

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event handlers in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

If you noticed, this syntax is different from what we have been seeing in our previous examples, this is because we have been using the Composition API all along.

Composition API

The Composition API was introduced in version 3 of Vue.js (Vue 3), It allows us to write our component’s logic, using a set of imported functions rather than declaring options as we would in the Options API.

With the Composition API, we can write fewer codes as we only import and use the functions we need. Here is the same example above with the Composition API:

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

This example has fewer codes and different syntax compared to our Options API example; that's because we're only importing the functions we need from Vue.js.

Which API Should I Learn?

This is a question I have heard many beginners ask, but it is important to know that both the Options API and the Composition API serve the same purpose, they are both powered by the same system, and they both work towards achieving the same goal.

My advice to you is; explore both APIs, starting with the Options API as it’s easier to learn and understand, then you can gradually move on to the Composition API later when you have a good understanding of how Vue.js works. But then you can also decide to learn the Composition API first.

Free Resources to Learn Vue

Now that you have a basic understanding of what Vue.js is. It’s time to strengthen your knowledge. Here are 2 free online resources to learn Vue:

1. Vue official documentation: If you really want to have an Indepth knowledge of Vue, then I think you should give the Vue documentation a try.

2. Codevolution’s Vue 3 tutorial for beginners: This is probably one of the best introductory courses to Vue.js online. This course covers both the Options API and the Composition API, it starts with beginner's level concepts and builds on it to a much more advanced concepts.

I also recommend that you make your own research and see what you can find, as there are many good resources out there to learn Vue.

Wrapping up

In this introduction to Vue.js for beginners, we have covered some of the key concepts of Vue.js, we have touched on Data Binding, Vue API Styles, and some of Vue's amazing features, and we've also seen some examples. Now that you have an understanding of what Vue.js is and what you can do with it, consider exploring other resources, either free or paid, so you can enjoy the goodness of Vue.js to the fullest.