PricingLoginStart free
Vue Academy · Lesson

Route Meta Fields and Typing

meta: { requiresAuth: true }, TypeScript declaration merging for typed meta.

Lesson 1 of 413 steps

Route Meta Fields and Typing is a free Vue Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

What Are Route Meta Fields?

Every route can carry a meta object: arbitrary data attached to the route. It is perfect for flags like authentication requirements, allowed roles, page titles, or layout choices.

Adding Meta to a Route

Set the meta key on a route record. The values are entirely up to you.

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin', 'editor'] }
  }
]

Reading Meta in a Guard

The most common use is in a navigation guard. router.beforeEach runs before every navigation and receives the target route, whose meta you can inspect.

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth) {
    // check login
  }
})

Redirecting Unauthenticated Users

Return a route location from the guard to redirect. Returning false cancels navigation; returning nothing or true allows it.

router.beforeEach((to) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { path: '/login' }
  }
})

Role-Based Access

Combine the roles meta field with the current user role to gate pages by permission.

router.beforeEach((to) => {
  const auth = useAuthStore()
  const roles = to.meta.roles
  if (roles && !roles.includes(auth.role)) {
    return { path: '/forbidden' }
  }
})

Meta Is Merged From Parents

Nested routes inherit meta from their parents via to.meta, which merges all matched records. A child sees the parent meta unless it overrides the same key.

The Typing Problem

By default TypeScript types meta as an empty object, so to.meta.requiresAuth errors. You fix this with declaration merging against Vue Router types.

Declaring Typed Meta

Augment the RouteMeta interface from vue-router. Place this in a .d.ts file or any module with an export {}.

import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
  }
}

export {}

Now Meta Is Type-Checked

After augmentation, the compiler knows the shape of meta. Typos like requireAuth are caught, and autocomplete works.

router.beforeEach((to) => {
  if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})

Using Meta in Components

Inside a component you can read the current route meta via useRoute() — also typed thanks to the augmentation.

import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuth

Meta for Page Titles

A common pattern: store a title in meta and set document.title from a global guard.

router.afterEach((to) => {
  if (to.meta.title) document.title = to.meta.title
})

Quick Check

Test your knowledge of route meta and typing.

Answer it in the interactive lesson

Recap

Route meta fields carry per-route data:

  • Define meta on route records (requiresAuth, roles, title).
  • Read it in router.beforeEach to guard navigation.
  • Meta merges from parent to child routes.
  • Type it with declaration merging on RouteMeta from vue-router.
Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
42
Lessons
156
Start learning freeView the full course

Frequently Asked Questions

Is the “Route Meta Fields and Typing” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Route Meta Fields and Typing”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

What will I learn in “Route Meta Fields and Typing”?

meta: { requiresAuth: true }, TypeScript declaration merging for typed meta. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

How long does the “Route Meta Fields and Typing” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Route Meta Fields and Typing
  2. Route Transitions and Animation
  3. Scroll Behavior Configuration
  4. Programmatic Navigation and useRouter
← Back to Vue Academy