nuxt-pages

name	nuxt-pages
description	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.

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'
import { Input } from '~/components/ui/input'
import {
  Pagination, PaginationContent, PaginationItem,
  PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis
} from '~/components/ui/pagination'

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>
    <Input v-model="filters.search" placeholder="Search..." />
    <PostsTable :posts="posts?.data || []" :loading="isLoading" />
    <Pagination
      v-if="pagination"
      v-model:page="filters.page"
      :total="pagination.total"
      :items-per-page="pagination.perPage"
      class="mt-4"
    >
      <PaginationContent v-slot="{ items }">
        <PaginationItem>
          <PaginationPrevious />
        </PaginationItem>
        <template v-for="item in items" :key="item.key">
          <PaginationItem v-if="item.type === 'page'">
            <PaginationLink :page="item.value" :is-active="item.value === filters.page">
              {{ item.value }}
            </PaginationLink>
          </PaginationItem>
          <PaginationItem v-else-if="item.type === 'ellipsis'">
            <PaginationEllipsis />
          </PaginationItem>
        </template>
        <PaginationItem>
          <PaginationNext />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  </div>
</template>

Detail Page Pattern

<script lang="ts" setup>
import getPostQueryFactory from '~/features/posts/queries/get-post-query'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '~/components/ui/tabs'

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>
  <Tabs v-if="!isLoading && post" default-value="details">
    <TabsList>
      <TabsTrigger value="details">Details</TabsTrigger>
    </TabsList>
    <TabsContent value="details">
      <PostDetail :post="post.data" />
    </TabsContent>
  </Tabs>
</template>