Home Courses Vue.js in 5 Days Day 4
Day 04 State Management

Pinia State Management

Stores, actions, getters, and the Pinia patterns that replace Vuex for all new Vue 3 projects. Share state across components without prop drilling.

~1 hour Intermediate Hands-on Precision AI Academy

Today's Objective

Stores, actions, getters, and the Pinia patterns that replace Vuex for all new Vue 3 projects. Share state across components without prop drilling.

01

Installing and Configuring Vue Router

Terminal

npm install vue-router

src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

// Import page components
import HomeView from '@/views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // Lazy-load: only downloaded when the route is visited
    component: () => import('@/views/AboutView.vue')
  },
  {
    path: '/users/:id',  // :id is a dynamic segment
    name: 'user-detail',
    component: () => import('@/views/UserDetailView.vue')
  },
  {
    // 404 catch-all — must be last
    path: '/:pathMatch(.*)*',
    name: 'not-found',
    component: () => import('@/views/NotFoundView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),  // uses real URLs (no #)
  routes
})

export default router
src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'

createApp(App).use(createPinia()).use(router).mount('#app')
02

RouterView and RouterLink

src/App.vue
03

Dynamic Routes and useRoute

Dynamic route segments like :id let one route match many URLs. Access the current route's params, query, and path with useRoute().

src/views/UserDetailView.vue
04

Navigation Guards: Protecting Routes

Navigation guards run code before a route is entered — perfect for authentication checks.

src/router/index.js (with auth guard)
import { useAuthStore } from '@/stores/auth'

// Per-route guard using route metadata
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/DashboardView.vue'),
    meta: { requiresAuth: true }  // mark protected routes
  }
]

// Global guard: runs before every navigation
router.beforeEach((to, from) => {
  const auth = useAuthStore()

  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    // Redirect to login, saving where they wanted to go
    return { name: 'login', query: { redirect: to.fullPath } }
  }
})
💡
After login: redirect the user to route.query.redirect || '/' so they land on the page they originally tried to visit. This is the expected UX pattern.
📝 Day 4 Exercise
Build a Multi-Page User Directory
  1. Set up Vue Router with at least 4 routes: Home, Users list, User detail (/users/:id), and 404.
  2. Fetch the users list from https://jsonplaceholder.typicode.com/users and display them on the Users page.
  3. Each user should be a link to their detail page. On the detail page, fetch and show their posts too.
  4. Build a persistent navbar with RouterLink and active link styling.
  5. Add a navigation guard that logs every route change to the console.
  6. Add a 404 page that shows the attempted path and a 'Go Home' button.

Day 4 Summary

→
← Previous
Day 3: Reactivity: ref, reactive, computed, watchers
Next →
Day 5: Deploy a Production Vue App
→

What's Next

The foundations from today carry directly into Day 5. In the next session the focus shifts to Testing and Deployment — building directly on everything covered here.

Supporting Videos & Reading

Go deeper with these external references.

YouTube
Pinia State Management — Video Walkthroughs Community tutorials and walkthroughs covering the concepts in this lesson.
→
YouTube
Pinia State Management Explained Deep-dive explanations and live-coding sessions from top educators.
→
Official Docs
Official Documentation Primary reference documentation for the technologies covered in this lesson.
→
GitHub
Open Source Examples Real-world codebases demonstrating the patterns taught in this lesson.
→

Day 4 Checkpoint

Before moving on, verify you can answer these without looking:

  • What is the core concept introduced in this lesson, and why does it matter?
  • What are the two or three most common mistakes practitioners make with this topic?
  • Can you explain the key code pattern from this lesson to a colleague in plain language?
  • What would break first if you skipped the safeguards or best practices described here?
  • How does today's topic connect to what comes in Day 5?

Live Bootcamp

Learn this in person — 2 days, 5 cities

Thu–Fri sessions in Denver, Los Angeles, New York, Chicago, and Dallas. $1,490 per seat. June–October 2026.

Reserve Your Seat →
Continue To Day 5
Day 5: Deploy a Production Vue App
→