# Nuxt Pages

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-leeovery-agentic-skills-nuxt-pages`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [leeovery](https://agentstack.voostack.com/s/leeovery)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [leeovery](https://github.com/leeovery)
- **Source:** https://github.com/leeovery/agentic-skills/tree/main/nuxt/skills/nuxt-pages

## Install

```sh
agentstack add skill-leeovery-agentic-skills-nuxt-pages
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```vue

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

```vue

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](https://github.com/leeovery)
- **Source:** [leeovery/agentic-skills](https://github.com/leeovery/agentic-skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-leeovery-agentic-skills-nuxt-pages
- Seller: https://agentstack.voostack.com/s/leeovery
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.