vue#

What it is#

vue is the Vue.js framework — a progressive UI framework built around fine-grained reactivity, single-file components (.vue), and template-first authoring. Vue 3 (the current line) compiles templates to vanilla JavaScript, uses Proxy-based reactivity, and exposes the Composition API for hook-style composition.

Reach for Vue when you want React-grade interactivity with a less ceremonial mental model (templates and reactivity instead of JSX and reconciliation), an opinionated official toolchain (Vite + Vue Router + Pinia + Nuxt), and a less-fragmented ecosystem. Reach for React if your team is already there or you need React Native; reach for Svelte if compile-time reactivity matters more.

Install#

For a new project, the official scaffolder is the path of least resistance.

npm create vue@latest my-app

Output: interactive prompts (TypeScript, Vue Router, Pinia, Vitest, Playwright, ESLint); writes a Vite + Vue 3 project.

For an existing project:

npm install vue

Output: added vue to dependencies

pnpm add vue

Output: added 1 package

yarn add vue

Output: added vue

bun add vue

Output: installed vue

To compile .vue files you also need @vitejs/plugin-vue (or vue-loader for Webpack).

Versioning & Node support#

Current line is vue@3.x (released 2020). Vue 2 hit end-of-life at the end of 2023.

• Node 18+ for tooling (Vite, vue-tsc); browser support tracks evergreen browsers.
• Dual ESM/CJS; ESM is the default for new projects.
• TypeScript types bundled.
• vue@3 minor releases are additive; patch versions are stable. Major version bumps occur only every several years.
• The @vue/composition-api polyfill that lived in the Vue-2 era is obsolete in Vue 3.

Package metadata#

• Maintainer: Evan You + the Vue core team
• Project home: github.com/vuejs/core
• Docs: vuejs.org
• npm: npmjs.com/package/vue
• License: MIT
• First released: 2014
• Downloads: millions weekly — the second most-installed UI framework after React.

Peer dependencies & extras#

vue itself has no peer deps. The ecosystem packages do.

• @vitejs/plugin-vue — .vue SFC compilation for Vite
• vue-tsc — type-check .vue files in CI
• vue-router — official router
• pinia — official state management (Vuex’s successor)
• nuxt — full-stack Vue framework
• @vueuse/core — composition utilities (analog to react-use)
• vitest + @vue/test-utils — testing

Alternatives#

Real-world recipes#

Composition API single-file component#

<script setup lang="ts">
import { ref, computed } from "vue";

const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
</script>

<template>
  <button @click="increment">{{ count }} (double: {{ double }})</button>
</template>

Output: button shows count and computed double; clicking increments — Vue tracks the ref and re-renders only what depends on it.

Reactive object with reactive#

<script setup lang="ts">
import { reactive } from "vue";

const state = reactive({ items: [] as string[], query: "" });
function add() {
  state.items.push(state.query);
  state.query = "";
}
</script>

<template>
  <input v-model="state.query" />
  <button @click="add">Add</button>
  <ul><li v-for="i in state.items" :key="i">{{ i }}</li></ul>
</template>

Output: typing and clicking add updates the reactive object; the list re-renders.

watch for side effects#

<script setup lang="ts">
import { ref, watch } from "vue";

const query = ref("");
const results = ref<string[]>([]);

watch(query, async (newQ) => {
  if (!newQ) return;
  const res = await fetch(`/api/search?q=${encodeURIComponent(newQ)}`);
  results.value = await res.json();
});
</script>

<template>
  <input v-model="query" placeholder="Search…" />
  <ul><li v-for="r in results" :key="r">{{ r }}</li></ul>
</template>

Output: typing into the input fetches search results and renders them; watch runs whenever query changes.

Pinia store#

// stores/counter.ts
import { defineStore } from "pinia";

export const useCounter = defineStore("counter", {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: { increment() { this.count++; } },
});

<script setup lang="ts">
import { useCounter } from "./stores/counter";
const counter = useCounter();
</script>

<template>
  <button @click="counter.increment">{{ counter.count }} ({{ counter.double }})</button>
</template>

Output: store is shared across components; the button updates the global count.

Vue Router with typed routes#

// router.ts
import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";

export default createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: Home },
    { path: "/posts/:id", component: () => import("./views/Post.vue") },
  ],
});

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

Output: dynamic imports lazy-load route components; <router-view /> in App.vue renders the current route.

provide / inject for tree-wide dependencies#

<!-- App.vue -->
<script setup lang="ts">
import { provide, ref } from "vue";
const theme = ref<"light" | "dark">("light");
provide("theme", theme);
</script>

<!-- Child.vue -->
<script setup lang="ts">
import { inject, type Ref } from "vue";
const theme = inject<Ref<"light" | "dark">>("theme");
</script>

<template>
  <p>Current theme: {{ theme }}</p>
</template>

Output: child reads the parent-provided theme without prop drilling; updating the parent ref propagates.

defineProps and defineEmits#

<script setup lang="ts">
const props = defineProps<{ label: string; disabled?: boolean }>();
const emit = defineEmits<{ click: [id: string] }>();
</script>

<template>
  <button :disabled="props.disabled" @click="emit('click', 'btn-1')">
    {{ props.label }}
  </button>
</template>

Output: strongly-typed props and events; parent gets autocomplete for <MyButton :label="..." @click="..." />.

Production deployment#

Vue’s deployment mirrors any Vite-built SPA or SSR app.

• Vite SPA. vite build emits dist/. Host on any static host (Netlify, Cloudflare Pages, S3 + CloudFront, Nginx). Configure SPA fallback to index.html.
• Nuxt SSR. nuxt build then node .output/server/index.mjs. Or nuxt build --preset cloudflare / vercel / node-server to target a specific platform.
• Vue + Vite SSR (manual). Vite has an SSR build mode; write a Node entry that calls renderToString from vue/server-renderer. Most teams prefer Nuxt instead.
• Static (SSG). Nuxt + nuxt generate produces a static site. VitePress for docs.
• Edge runtimes. Nuxt’s Cloudflare and Vercel Edge presets ship a Workers-compatible bundle.

nuxt build --preset cloudflare_pages

Output: writes a .output/public/ directory ready for wrangler pages deploy.

Performance tuning#

• Composition API + <script setup> is the lowest-overhead authoring style. Avoid the Options API for new code unless team preference dictates.
• shallowRef / shallowReactive for large objects you mutate atomically — Vue skips deep proxy tracking.
• v-memo memoises a list item’s render by a dependency array. Useful for huge static lists.
• <KeepAlive> caches dynamic component instances between mounts.
• Bundle splitting. Use dynamic import() in routes (component: () => import('./X.vue')) so each route ships its own chunk.
• Server components and partial hydration in Nuxt 3+ (<NuxtIsland>) for islands-style apps.
• v-once renders a subtree once and never updates — micro-optimisation for truly static blocks.
• Avoid creating refs in render functions. ref allocations belong in setup, not in templates or computed callbacks.

Version migration guide#

Vue 2’s end of life was end of 2023. Most active codebases are on 3 already.

Vue 2 → Vue 3 (the big one)#

Before (Vue 2 Options API):

export default {
  data() { return { count: 0 }; },
  computed: { double() { return this.count * 2; } },
  methods: { increment() { this.count++; } },
};

After (Vue 3 Composition API):

<script setup>
import { ref, computed } from "vue";
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
</script>

Output: same component behaviour; Vue 3 syntax is more amenable to TypeScript and tree-shaking.

Key Vue 2 → 3 breaks:

Migration checklist:

1. Upgrade tooling first — vite + @vitejs/plugin-vue, drop vue-template-compiler.
2. Run the official migration build (@vue/compat) which logs Vue 2 patterns inside a Vue 3 runtime.
3. Replace removed APIs progressively. Filters → methods. $on → external emitter (mitt).
4. Audit data() { return { ... } } for non-reactive new properties — Vue 3 handles them automatically.
5. Replace Vuex with Pinia (recommended path).
6. Run the test suite continuously during the migration.

Vue 3 minor upgrades#

Vue 3 minor releases are additive. vue@3.4 introduced macros like defineModel; 3.5 added reactivity refinements. Read release notes before bumping.

Security considerations#

• v-html is XSS. Equivalent to dangerouslySetInnerHTML. Sanitise untrusted input with DOMPurify before binding.
• Template injection on the server. Server-rendered Vue with user-controlled template strings is template-injection — never compile templates from user input.
• href and src from user data. :href="userUrl" allows javascript: URIs. Validate protocols.
• <script> injection via slots. Slots accept any content; if a slot fills with user-controlled DOM, sanitise.
• Pinia state in SSR. Hydrated state lands in the HTML payload. Filter secrets before serialising.
• Nuxt route middleware. Server middleware runs in Nitro (the server engine). Validate inputs as you would any HTTP handler.

Testing & CI integration#

Unit test with Vitest + @vue/test-utils#

// Counter.test.ts
import { describe, it, expect } from "vitest";
import { mount } from "@vue/test-utils";
import Counter from "./Counter.vue";

describe("Counter", () => {
  it("increments on click", async () => {
    const wrapper = mount(Counter);
    await wrapper.find("button").trigger("click");
    expect(wrapper.text()).toContain("1");
  });
});

Output: test passes; mount returns a wrapper with DOM and instance accessors.

Component playground with Storybook (optional)#

npx storybook@latest init

Output: scaffolds Storybook with Vue 3 framework preset; stories live next to components.

CI pipeline#

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22, cache: "npm" }
      - run: npm ci
      - run: npm run lint
      - run: npm run type-check
      - run: npm test -- --run
      - run: npm run build

Ecosystem integrations#

Troubleshooting common errors#

Cannot find module './Foo.vue' or its corresponding type declarations — missing shims-vue.d.ts or the vue-tsc import path in tsconfig.json. Confirm @vitejs/plugin-vue is configured and "compilerOptions.types": ["vite/client"].

Property "x" was accessed during render but is not defined — referenced a variable in the template that isn’t in scope. With <script setup>, ensure the binding is declared at the top level of the script block.

Hydration mismatch in Nuxt — server and client rendered different HTML. Pin locales, dates, and random values; avoid Date.now() in templates.

v-model not working on custom component — Vue 3 changed the prop/event names from value / input to modelValue / update:modelValue. Update the child component or use the explicit form v-model:something.

Maximum recursive updates exceeded — a watcher mutates the value it watches. Add a guard or use watch with flush: 'post'.

[Vue warn]: <Suspense> slot… — <Suspense> requires exactly one async child. Wrap multiple async components in a fragment with a single root, or split into nested Suspense.

When NOT to use this#

• Native mobile. React Native or Flutter; Vue has no equivalent.
• Tiny embeddable widget. Preact/Vanilla; Vue 3 runtime is ~30 KB gzipped.
• Team already invested in React. The cost of context-switching usually outweighs the benefit.
• Existing AngularJS / Backbone codebase that you only want to incrementally modernise. htmx or alpine.js may slot in with less churn.
• Content-heavy mostly-static site. Astro / Eleventy will be smaller and faster.

See also#

• JavaScript: react-basics — paradigm contrast
• Concept: api — composables vs hooks vs lifecycle