Vue Academy · Lesson

Route Meta Fields and Typing

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

Route Meta Fields and Typing is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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.

Frequently asked questions

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

Yes — the full text of “Route Meta Fields and Typing” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

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

← Back to Vue Academy