nuxt-pages

leeovery's avatarfrom leeovery

File-based routing with page patterns for lists, details, and navigation. Use when creating pages, defining page meta (permissions, layouts), implementing list/detail patterns, or setting up breadcrumbs and headers.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 3, 2026
[Architecture Design]

When & Why to Use This Skill

The Nuxt Pages skill provides a comprehensive framework for implementing file-based routing and standardized page patterns in Nuxt.js applications. It streamlines the development process by offering structured templates for list and detail views, simplifying page metadata configuration for permissions and layouts, and automating the setup of navigation elements like breadcrumbs and headers to ensure architectural consistency.

Use Cases

  • Scaffolding Nuxt.js project structures using standardized file-based routing and directory conventions for improved maintainability.
  • Implementing robust list-detail patterns with integrated reactive filtering, pagination, and asynchronous data fetching logic.
  • Managing application security and UI state by defining granular page-level permissions and custom layouts within page metadata.
  • Streamlining frontend workflows by automatically configuring application headers, icons, and navigation paths based on page definitions.
namenuxt-pages
descriptionFile-based routing with page patterns for lists, details, and navigation. Use when creating pages, defining page meta (permissions, layouts), implementing list/detail patterns, or setting up breadcrumbs and headers.

Nuxt Pages

File-based routing with common page patterns and navigation.

Core Concepts

pages.md - Page patterns, meta, layouts, navigation

Directory Structure

pages/
├── index.vue              # Dashboard/redirect
├── profile.vue            # User profile
├── auth/
│   └── login.vue          # Login page
├── posts/
│   ├── index.vue          # List view
│   └── [ulid].vue         # Detail view
└── users/
    ├── index.vue
    └── [ulid].vue

List Page Pattern

<script lang="ts" setup>
import getPostsQueryFactory, { type GetPostsFilters } from '~/features/posts/queries/get-posts-query'
import { ListPosts, CreatePost } from '~/constants/permissions'

definePageMeta({ permissions: ListPosts })

const { setAppHeader } = useAppHeader()
setAppHeader({ title: 'Posts', icon: 'lucide:file-text' })

const { filters } = useReactiveFilters<GetPostsFilters>({
  status: undefined,
  page: 1,
  size: 25,
})

const getPostsQuery = getPostsQueryFactory()
const { data: posts, isLoading, pagination } = getPostsQuery(filters)
</script>

<template>
  <div>
    <UInput v-model="filters.search" placeholder="Search..." />
    <PostsTable :posts="posts?.data || []" :loading="isLoading" />
    <XPagination v-if="pagination" v-model:page="filters.page" :pagination="pagination" />
  </div>
</template>

Detail Page Pattern

<script lang="ts" setup>
import getPostQueryFactory from '~/features/posts/queries/get-post-query'

definePageMeta({ permissions: 'posts.show' })

const route = useRoute()
const ulid = computed(() => route.params.ulid as string)

const getPostQuery = getPostQueryFactory()
const { data: post, isLoading } = getPostQuery(ulid)
</script>

<template>
  <UTabs v-if="!isLoading && post" :items="tabs">
    <template #details><PostDetail :post="post.data" /></template>
  </UTabs>
</template>