Nuxt Pages

Nuxt Pages

File-based routing with common page patterns and navigation.

Core Concepts

[pages.md](references/pages.md) - Page patterns, meta, layouts, navigation

[rendering-strategies.md](references/rendering-strategies.md) - Per-route rendering via routeRules: prerender for marketing, ssr: false for SPA flows, redirects, layout switching, multi-step page flows that survive refresh + back/forward nav

[layouts.md](references/layouts.md) - Flat layouts in app/layouts/, per-page switching via definePageMeta, slot-based composition, layouts using composables (e.g. apply-flow progress)

[seo.md](references/seo.md) - useSeoMeta, @nuxtjs/seo module suite, sitemap config, OG images via nuxt-og-image, structured data via nuxt-schema-org, robots.txt, prerender + SEO interactions

[images.md](references/images.md) - @nuxt/image for responsive srcset, ` vs , LCP image hints (preload + fetchpriority), sizes` attribute, provider config on Cloudflare

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

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({
  status: undefined,
  page: 1,
  size: 25,
})

const getPostsQuery = getPostsQueryFactory()
const { data: posts, isLoading, pagination } = getPostsQuery(filters)

  
    
    
    
  

Detail Page Pattern

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)

  
    
  

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: leeovery
• Source: leeovery/agentic-skills
• License: MIT

Install and usage instructions live in the source repository linked above.