Vue

Vue.js

Pronunciation: VYOO

Updated October 3, 20262 min read

In short

Vue is an open-source JavaScript framework for building user interfaces from components, known for its gentle learning curve and reactive data.

What is Vue?

Vue was created by Evan You and first released in 2014, after he had worked with AngularJS at Google and wanted something lighter. It calls itself a progressive framework: you can add it to one part of an existing page, or use it with its router, state management and build tools to build a full single-page application.

Vue's core idea is reactivity. You declare data, Vue tracks which parts of the template use it, and when the data changes it updates exactly those parts of the page. Templates look like regular HTML with a few additions, such as v-if for conditions, v-for for lists and @click for events, which makes them easy to read for anyone who knows HTML.

Most Vue code lives in single-file components, .vue files with a <template> for markup, a <script> for logic and a <style> for CSS. Vue 3, released in 2020, added the Composition API, which groups related logic into functions in a way similar to React hooks. Nuxt is the popular framework on top of Vue for server rendering and routing, as Next.js is for React.

A common misconception is that Vue is only for small projects. It is used in large production applications, especially in Asia and in companies that value its approachable syntax. Compared with React, Vue includes more official pieces, such as the router and the Pinia state library, and uses templates instead of JSX by default.

Key takeaways

Vue is a progressive JavaScript framework for building user interfaces.
Reactive data updates exactly the parts of the page that use it.
HTML-based templates use directives such as v-if, v-for and @click.
Single-file .vue components hold template, script and style together.
Nuxt is the framework built on Vue for server rendering and routing.

Example

A counter as a single-file component (Counter.vue)vue

<script setup>
import { ref } from "vue";

const count = ref(0); // reactive: the template updates when it changes
</script>

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

<style scoped>
button { padding: 0.5rem 1rem; }
</style>

Readers ask

What is the difference between Vue and React?

Both build interfaces from components. Vue uses HTML-based templates and tracks data changes automatically, and ships official routing and state libraries. React uses JSX, re-renders components when state changes, and leaves more choices to the ecosystem.

What is Nuxt?

Nuxt is a framework built on Vue that adds file-based routing, server-side rendering, static generation and server code, much as Next.js does for React.

Is Vue a library or a framework?

Vue describes itself as a progressive framework: its core is a view library, and official packages add routing, state management and tooling when you need them.

Often compared

React vs VueReact is a library that uses JSX and leaves routing and state to its ecosystem, while Vue is a framework with HTML-like templates and official tools for both.

Vue