Vue

What is it?

Vue is a JavaScript framework for building user interfaces, created in 2014 by Evan You. Like React, it builds UIs out of reusable components and keeps the page in sync with your data automatically. Unlike React, it keeps HTML, JavaScript, and CSS in familiar, separate blocks inside a single .vue file - which is a big part of why it's widely considered the friendliest framework for beginners.

Vue calls itself "progressive" because you can adopt it gradually: sprinkle it onto one widget of an existing page, or build an entire app with it.

When to use it

Vue shines when you want a gentle learning curve without giving up power - its official documentation is written specifically with newcomers in mind, and its template syntax reads almost like plain HTML. It's a great fit for solo developers and small teams building interactive apps. If your priority is the job market, React has more listings; if you're building a simple content site, plain HTML/CSS/JS may be all you need.

Core concepts

• Single-file components - a .vue file holds a <template> (HTML), a <script> (logic), and a <style> (CSS) for one component.
• Reactivity - wrap data in ref() and Vue tracks it. Change the value, and every part of the page using it updates automatically.
• Directives - small attributes that add behavior to plain HTML: v-if to show/hide, v-for to repeat, v-model to bind a form input to data, @click to handle events.
• Props and events - parents pass data down as props; children signal back up by emitting events.
• Computed properties - values derived from other data that recalculate themselves when their inputs change.

A taste of the code

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

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

The template is just HTML with a couple of extras. Increment count and the button text updates by itself - that's Vue's reactivity doing the work.

Your first steps

1. Get comfortable with HTML, CSS, and JavaScript basics first - Vue builds directly on them.
2. Install Node.js, then scaffold a project with npm create vue@latest (answer "No" to the optional extras for now).
3. Run npm install and npm run dev, then edit src/App.vue and watch the browser update live.
4. Build a todo list using ref(), v-for, and v-model - it covers most of what you'll use daily.
5. Split your app into two or three components and pass data between them with props.

Common beginner mistakes

• Following Vue 2 tutorials. Vue 2 reached end of life at the end of 2023. Look for Vue 3 material using the Composition API and <script setup>.
• Destructuring a reactive() object. const { count } = state copies the value and loses reactivity. Use toRefs(), or prefer ref() for individual values.
• Mutating props. Props flow down; a child should emit an event and let the parent change the data.
• Forgetting :key on v-for. Without stable keys, Vue can reuse the wrong elements when a list changes, leaving inputs and animations out of sync.
• Using v-if where v-show fits. v-if destroys and recreates elements; for something toggled often, v-show just hides it.

Getting it online

A built Vue app (npm run build) is static files, deployable exactly like a React app - the steps in our Vite deployment guide apply unchanged, including the fix for 404s when refreshing a route.

Nuxt apps can be generated as static files too, or run with server rendering on a Node host.

Go deeper