Skip to content
Learni
View all tutorials
Frontend

How to Configure Vue Router in Vue 3 in 2026

14 minINTERMEDIATE
TypeScriptVue.jsVue Router
Lire en français

Introduction

Vue Router is the official routing library for Vue.js. In 2026, with Vue 3 and the Composition API, it enables building high-performance and maintainable single-page applications. This intermediate tutorial guides you step-by-step to configure a complete router with TypeScript, including navigation guards, dynamic routes, and lazy loading of components. You will learn how to structure a professional project while avoiding common pitfalls.

Prerequisites

  • Node.js 20+
  • Intermediate knowledge of Vue 3 and TypeScript
  • Vite or Vue CLI installed
  • Basic understanding of .vue components

Installing Vue Router

terminal
npm install vue-router@4

This command installs Vue Router version 4, which is compatible with Vue 3. Make sure to use version 4 to benefit from the latest TypeScript features and Composition API support.

Creating the Router File

src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

This file defines the base routes with lazy loading. createWebHistory() enables HTML5 History mode for clean URLs.

Integration in main.ts

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

const app = createApp(App);
app.use(router);
app.mount('#app');

Using app.use(router) registers the router globally. This makes $router and $route available in all components.

Adding Dynamic Routes

src/router/index.ts
{
  path: '/user/:id',
  name: 'User',
  component: () => import('../views/User.vue'),
  props: true
}

Dynamic routes capture URL parameters. The props: true option automatically passes parameters as props to the component.

Implementing a Global Guard

src/router/index.ts
router.beforeEach((to, from, next) => {
  const isAuthenticated = true;
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Home' });
  } else {
    next();
  }
});

beforeEach guards allow you to control access to routes. Use meta.requiresAuth to protect private pages.

Best Practices

  • Always use lazy loading for routes
  • Centralize configuration in a single router/index.ts file
  • Define meta tags for page titles
  • Test navigation guards with real scenarios
  • Prefer createWebHistory for SEO

Common Errors to Avoid

  • Forgetting to call next() in guards
  • Using static imports instead of lazy loading
  • Not typing routes with RouteRecordRaw
  • Ignoring navigation errors with router.onError

Going Further

Deepen your skills with our complete Vue.js and TypeScript courses. Discover our Learni courses.