An overview of Vue.js

Vue is a JavaScript framework for building user interfaces.

You describe the interface using templates and components. Vue tracks the state used by those templates and updates the DOM when that state changes.

The current version is Vue 3. Vue 2 reached end of life on December 31, 2023, so new projects should use Vue 3. The official Vue introduction and Vue 2 migration guide cover both paths.

Why is Vue called a progressive framework?

Vue can grow with the project.

You can add it to an existing HTML page to control one small part of the interface. You can also use it to build a complete single-page application, a statically generated site, or a server-rendered application.

This is what progressive means in Vue. You do not need to adopt every part of the ecosystem on day one.

Vue builds on HTML, CSS, and JavaScript. If you already know those three technologies, its template syntax should look familiar.

The two core ideas

Vue’s programming model is based on two important ideas:

• declarative rendering: you describe the HTML you want for the current state
• reactivity: Vue tracks state changes and updates the affected DOM

Here is a small Vue 3 component:

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

const count = ref(0)
</script>

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

ref(0) creates reactive state.

The template reads count, and @click listens for a click. When the value changes, Vue updates the button text.

Vue single-file components

Most Vue applications use single-file components. These are .vue files that keep a component’s JavaScript, template, and styles together.

Example:

<script setup>
const name = 'Flavio'
</script>

<template>
  <h1>Hello {{ name }}</h1>
</template>

<style scoped>
h1 {
  color: navy;
}
</style>

The optional scoped attribute limits those styles to the component.

Single-file components require a build step. The official docs recommend them when you are building a complete Vue application.

Composition API and Options API

Vue 3 supports two ways to write component logic:

• Composition API, usually with <script setup>
• Options API, using options such as data, methods, and mounted

Both APIs use the same underlying Vue system and cover common use cases.

The official Vue API styles guide recommends Composition API with single-file components for full applications. The Options API remains useful for progressive enhancement and simpler projects without build tools.

You can learn one first and pick up the other later.

How to create a Vue project

The official Vue scaffolding tool is create-vue. It creates a Vite-based project:

npm create vue@latest

The prompts let you add TypeScript, Vue Router, Pinia, tests, and other tools. If you are learning, it is fine to answer no to everything at first.

Then start the development server:

cd my-vue-app
npm install
npm run dev

See the current prerequisites and complete steps in the official Vue quick start.

For larger applications, Vue Router is the official routing library and Pinia is the official state management library.

When should you use Vue?

Vue is a good choice when you want a component-based interface without moving too far away from HTML.

It works well for:

• adding interactivity to an existing page
• dashboards and internal tools
• single-page applications
• reusable component systems
• sites rendered on the server or at build time

My advice is to start with one small component. Learn templates, props, events, and reactive state before adding routing or global state.

Related posts about vue: