Vue.js

What is Vue.js?

Vue.js is an open source JavaScript framework for building user interfaces and single-page applications. Many developers simply call it Vue. Both names refer to the same framework.

Vue focuses on what the user sees: buttons, forms, lists and entire screens. You build an interface from separate components. Vue then makes sure the screen updates automatically whenever the data changes.

Evan You released Vue.js in 2014. He had previously worked with AngularJS at Google and wanted to create a lighter alternative that kept the parts he found most useful. Vue is released under the MIT licence, so you can use it for free, including in commercial projects.

There is no big tech company behind Vue. The project is run by a core team and supported by its community and sponsors.

What does progressive framework mean?

Vue describes itself as a progressive framework. This means you can adopt it step by step. You can use Vue for a single interactive element on an existing page. You can also use it to build a complete web application, with routing, state management and server-side rendering.

So there is no need to commit to everything at once. Start small, and you can expand later without switching frameworks.

What is Vue.js used for?

Vue.js is a versatile choice for the frontend of websites and web applications. You will often find it in these situations:

• Single-page applications (SPAs), where the page does not reload every time you navigate

• Dashboards and internal tools with lots of forms, tables and filters

• Interactive elements within an existing website, such as a product configurator or search filter

• Online shops and content sites, often combined with Nuxt for server-side rendering

• Mobile and desktop apps, using tools such as Capacitor or Electron that turn web technology into an app

Well-known users include GitLab and Alibaba. Vue is also popular within the Laravel ecosystem in the PHP world.

How does Vue.js work?

Vue.js is built around three ideas: components, reactivity and templates. Together, they mean you write less code to keep the screen up to date.

Components

A component is a reusable building block of the interface, such as a button, a product card or a navigation bar. Each component has its own HTML, logic and styling. A large application is made up of a tree of components that fit together.

Components pass data to each other using props. A child component can send a signal back to its parent through an event. This keeps it clear where data comes from.

Reactivity

Reactivity is at the heart of Vue. You link data to the interface, and Vue keeps track of which parts of the screen depend on which data. When a value changes, Vue updates only those parts.

This means you do not have to change the page yourself with separate DOM operations. In Vue 3, this system relies on JavaScript Proxies, which notice whenever data is read or changed.

Templates and directives

In a template, you write ordinary HTML extended with special attributes. These attributes are called directives and start with v-. Double curly braces insert a value straight into the text, as in {{ name }}.

These are the directives you will use most often:

• v-if and v-else show or hide an element based on a condition

• v-for repeats an element for every item in a list

• v-bind (shorthand: :) binds an attribute to data

• v-on (shorthand: @) responds to events, such as a click

• v-model creates a two-way binding between an input field and data

Virtual DOM

By default, Vue uses a virtual DOM. This is a lightweight copy of the page held in memory. When something changes, Vue compares the new version with the previous one and applies only the differences to the real page.

Vue gains extra speed here because its compiler analyses templates in advance. Parts that never change are skipped during updates. The Vue team is also working on Vapor Mode: an optional compilation mode that skips the virtual DOM entirely and updates the page directly.

Single-file components

In most Vue projects, you write components as single-file components (SFCs). An SFC is a file with the .vue extension that keeps the template, logic and styling together. A build tool such as Vite turns this file into code the browser understands.

A simple counter looks like this:

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

const count = ref(0)
</script>

<template>
  <button @click="count++">
    You clicked {{ count }} times
  </button>
</template>

<style scoped>
button {
  padding: 8px 16px;
}
</style>

The script block holds the logic. Wrapping the value in ref() makes count reactive. The template shows the value and increases it with every click. Thanks to scoped, the styling applies only to this component.

Options API and Composition API

Vue.js offers two ways to write a component's logic. They exist side by side, and you can use both in the same project.

Options API

The Options API is the classic approach from Vue 2. You organise a component into fixed sections, such as data, methods, computed and watch. This keeps small components tidy and is easy to learn.

export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

Composition API

The Composition API arrived with Vue 3. Here, you write logic as plain functions, using helpers such as ref, computed and watch. In larger components, this lets you keep related code genuinely together.

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

const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

A major advantage is reuse. You can move logic into its own function, known as a composable, and use it across multiple components. The Composition API also works better with TypeScript. That is why Vue recommends it for full applications built with a build tool.

The Vue.js ecosystem

One of the strengths of Vue.js is that its key tools are either officially maintained or closely aligned with the core team. You do not have to pick from dozens of separate packages yourself. These are the best-known parts:

• Vue Router: handles navigation between pages in a single-page application

• Pinia: the official solution for state management, meaning data shared by multiple components; Pinia succeeded Vuex

• Vite: a fast build tool and dev server, also created by Evan You

• Nuxt: a meta-framework built on Vue for server-side rendering, static site generation and folder-based routing

• Vue DevTools: a browser extension for inspecting components, state and performance

There are also plenty of UI libraries with ready-made components, such as Vuetify, PrimeVue and Quasar.

Pros and cons of Vue.js

No framework is the best choice for every project. It helps to weigh up the strengths and weaknesses of Vue.js side by side.

Pros

Vue is known as one of the most approachable frameworks to start with. Its main advantages are:

• Easy to get started: templates look like ordinary HTML, so a basic grasp of HTML, CSS and JavaScript gets you a long way

• Excellent documentation: the official guides are clear and thorough

• Flexible: you can use it for a single widget or a full application

• Official tools: routing and state management are covered, so there are fewer decisions to make

• Fast and lightweight: the reactivity system and compiler keep updates efficient and the baseline size small

Cons

There are also some points to bear in mind:

• Smaller ecosystem than React: there are fewer packages and off-the-shelf solutions

• Fewer job openings than React: this matters whether you are hiring developers or looking for a role yourself

• No major corporate backer: no tech giant funds it, although the project has been running steadily on sponsors and community support for years

• Two API styles: without clear agreements, a team can end up writing components in different ways

• Major version upgrades: moving from Vue 2 to Vue 3 took considerable effort for many projects

Vue.js vs React and Angular

Vue.js is often compared with React and Angular. All three are well suited to modern web applications, but their approaches differ considerably.

React focuses purely on the interface, so you choose your own packages for routing and state management. Angular, by contrast, is a complete package with everything built in, but it takes longer to learn. Vue sits in between: lighter than Angular, with more official choices than React.

A short history of Vue.js

Evan You published the first version of Vue.js in February 2014. It started as a side project and grew into one of the most popular JavaScript frameworks in the world.

Vue 2 followed in 2016, introducing a virtual DOM and support for server-side rendering, among other things. This was the version that made Vue truly mainstream.

Vue 3 was released in September 2020. It brought the Composition API, a rewritten reactivity system and better TypeScript support. Vue 3 has been the default version since February 2022. Vue 2 reached the end of its official support on 31 December 2023.

A framework that grows with your project

Vue.js is an approachable and flexible framework for building user interfaces. Components, reactivity and templates form its foundation. You can start small with a single component and grow into a complete application with routing, state management and server-side rendering.

If you are looking for a framework that is quick to learn yet robust enough for large projects, Vue is a strong contender. If you want the largest ecosystem, React is the more obvious choice. If you prefer everything built in with a strict structure, Angular is a better fit.