skills.rest
omakei
omakeiCOMMUNITY
Explore all skills by this author →
Website𝕏@djomakeiGitHub

nuxt-pages

Standardize Nuxt 4 page routing and metadata with definePageMeta patterns.

2|1|Updated Mar 16, 2026
Search Tags:#routing#vue3#layouts#meta#breadcrumbs#nuxt#pages
One-click install
npx skills add https://github.com/omakei/adonisjs-architecture-skill --skill nuxt-pages-omakei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-pages
Source: https://github.com/omakei/adonisjs-architecture-skill/tree/main/nuxt/skills/nuxt-pages
Command: npx skills add https://github.com/omakei/adonisjs-architecture-skill --skill nuxt-pages-omakei

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

File-based routing with consistent page patterns helps teams rapidly scaffold Nuxt 4 apps with predictable routes, metadata, and navigation structures, reducing boilerplate and cognitive load.

Core Features & Use Cases

  • File-based routing from the pages/ directory to auto-map routes (lists via index.vue, details via [ulid].vue, nested routes via folders)
  • Page meta configuration example patterns using definePageMeta for permissions, layouts, and middleware
  • Breadcrumbs, headers, and navigation patterns that unify page presentation across the app
  • Pattern guidance for list/detail pages, metadata-driven layouts, and route composition

Quick Start

Create pages under the pages/ directory following the file-based routing patterns (index.vue for lists, [ulid].vue for details), and set definePageMeta for permissions and layouts to enable consistent navigation and metadata handling.

Frequently Asked Questions about nuxt-pages

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure file-based routing in a Nuxt 4 pages directory?▼

To configure Nuxt 4 page metadata, use definePageMeta within your page components to assign permissions, apply layouts, and register middleware for consistent route handling.

How do I implement breadcrumbs and headers across a Nuxt 4 app?▼

Implement breadcrumbs and headers across a Nuxt 4 app by applying standardized page routing patterns that unify navigation structures and page presentation through metadata-driven layouts.

What is the best way to manage layouts and permissions for dynamic routes in Vue 3?▼

The best way to manage layouts and permissions for dynamic Vue 3 routes is using definePageMeta in Nuxt 4 to declare permissions and assign layouts directly within your page components.

Does this Nuxt routing pattern support metadata-driven layouts for list and detail pages?▼

Yes, this Nuxt routing pattern supports metadata-driven layouts by providing configuration examples for list and detail pages, standardizing route composition and page presentation.

When do I need to use definePageMeta for route composition in Nuxt?▼

You need to use definePageMeta for route composition in Nuxt when creating list and detail pages that require unified permissions, layouts, middleware, and consistent navigation structures.

Related Skills

Explore More Software Engineering Skills→
danghungtb26danghungtb26
3

project-conventions

Enforce naming and folder structure conventions for React TypeScript admin templates.

Community
Basic
jiaiyanjiaiyan
21

el-page-header

Create a reusable PageHeader component with back navigation and slots for Vue 3 Element Plus apps.

Community
Intermediate
noartemnoartem

nuxt-better-auth

Integrate Better Auth into Nuxt 4 apps for session management and route protection.

Community
Advanced
jorggerojasjorggerojas
1

pages-router

Organize Next.js Pages Router pages under src/pages with dynamic routes and _app.tsx and _document.tsx configurations.

Community
Intermediate