vue-router

The official router for Vue.js — nested routes, lazy-loading, navigation guards, and typed routes for Vue 3 apps.

vue-router

Vue

The official router for Vue.js — nested routes, lazy-loading, navigation guards, and typed routes for Vue 3 apps.

npm GitHub Docs

Fit

Bundle (gzip)

24.3 kB

71.8 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Building a multi-page Vue app without a router means manually managing URL state, history pushes, and component swapping — all without the navigation guards and lazy-loading needed for real production apps.

What It Does

Vue Router maps URL paths to Vue components, handles dynamic segments, query parameters, and hash navigation. Navigation guards let you intercept route changes for authentication, analytics, or data prefetching. Routes can be lazy-loaded with dynamic import() for automatic code splitting.

Installation

bash

npm install vue-router

Usage Example

typescript

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    { path: '/users/:id', component: () => import('./views/User.vue') },
    { path: '/admin', component: () => import('./views/Admin.vue'),
      beforeEnter: (to, from) => isAdmin() || '/login' },
  ],
});

// main.ts
app.use(router);

Related packages

element-plusVue

A complete component library for Vue 3 with a clean, desktop-oriented design system.

floating-vueVue

Tooltip, popover, and dropdown directives for Vue 3 — powered by Floating UI with automatic placement and overflow detection.

naive-uiVue

Fairly complete Vue 3 UI component library — 90+ components with a TypeScript-first design and no dependency on legacy CSS frameworks.

piniaVue

The intuitive, type-safe, and lightweight state management store for Vue — the official successor to Vuex.

@tanstack/vue-queryVue

Powerful async state management for Vue — data fetching, caching, background refetching, and server state synchronization.