Vue Router installation and setup - Performance & Optimization

Performance: Vue Router installation and setup

MEDIUM IMPACT

This affects the initial page load speed and navigation responsiveness by adding routing logic and components to the Vue app.

Setting up routing in a Vue app

Vue

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

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

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

Client-side routing avoids full page reloads, improving navigation speed and reducing server requests.

📈 Performance GainReduces LCP and INP by enabling fast client-side route changes without reloads.

Setting up routing in a Vue app

Vue

import { createApp } from 'vue';
import App from './App.vue';

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

No routing setup means full page reloads on navigation, causing slower user experience and higher server load.

📉 Performance CostTriggers full page reloads on navigation, increasing LCP and INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No Router (full reloads)	High (full page reload)	Many (full page layout)	High (full repaint)	[X] Bad
Vue Router with eager loading	Moderate (component swaps)	Few (component layout changes)	Moderate (partial repaint)	[!] OK
Vue Router with lazy loading	Low (only loaded components)	Few (minimal layout)	Low (minimal repaint)	[OK] Good

Rendering Pipeline

Vue Router intercepts navigation events and updates the Vue component tree without reloading the page, affecting the rendering pipeline by triggering component re-renders and DOM updates.

→JavaScript Execution

→Virtual DOM Update

→Layout

→Paint

⚠️ BottleneckVirtual DOM Update and Layout when switching routes with large components

Core Web Vital Affected

LCP, INP

This affects the initial page load speed and navigation responsiveness by adding routing logic and components to the Vue app.

Optimization Tips

1Use Vue Router to avoid full page reloads and improve navigation speed.

2Implement lazy loading for route components to reduce initial bundle size.

3Monitor route changes in DevTools Performance tab to identify rendering bottlenecks.

Performance Quiz - 3 Questions

What is the main performance benefit of using Vue Router instead of full page reloads?

A Less JavaScript execution overall

B Smaller initial bundle size

C Faster navigation by avoiding full page reloads

D No DOM updates needed

DevTools: Performance

How to check: Open DevTools Performance tab, record navigation between routes, and observe scripting and rendering times.

What to look for: Look for reduced scripting and layout times during route changes indicating efficient client-side routing.