home / skills / ehtbanton / claudeskillsrepo / nuxt-page-generator

nuxt-page-generator skill

safe

This skill generates complete Nuxt 3 page components using Vue 3 Composition API with auto-imports for rapid page creation.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill nuxt-page-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

602 B

---
name: nuxt-page-generator
description: Generate Nuxt 3 page components with Vue 3 Composition API. Triggers on "create nuxt page", "generate nuxt component", "nuxt 3 page", "nuxt file".
---

# Nuxt Page Generator

Generate Nuxt 3 pages with Vue 3 Composition API and auto-imports.

## Output Requirements

**File Output:** `*.vue` page files
**Format:** Valid Nuxt 3 page
**Standards:** Nuxt 3.x, Vue 3

## When Invoked

Immediately generate a complete Nuxt page.

## Example Invocations

**Prompt:** "Create Nuxt product listing page"
**Output:** Complete `products/index.vue` with data fetching.

Overview

This skill generates complete Nuxt 3 page components using the Vue 3 Composition API and Nuxt auto-imports. It produces ready-to-drop .vue files that follow Nuxt 3 conventions and work with server or client data fetching patterns. The generator targets practical pages (index, show, listing, forms) and provides consistent structure and comments for quick customization.

How this skill works

When invoked with a prompt like "create nuxt page" or "generate nuxt component", the skill outputs a single .vue page file matching Nuxt routing conventions. It includes script setup with Composition API, template scaffold, optional data fetching (useAsyncData/useFetch), and example props, composables, and components auto-import usage. Files are valid Nuxt 3 pages and include optional TypeScript annotations where appropriate.

When to use it

Bootstrapping new pages in a Nuxt 3 project quickly
Creating product listing, detail, or form pages that follow Nuxt conventions
Prototyping UI with realistic data-fetching examples
Converting design mockups into working page skeletons
Generating pages that consistently use Composition API and auto-imports

Best practices

Specify the route path or target filename in the prompt (e.g., products/index.vue) for accurate output
Indicate whether data should be fetched server-side (useAsyncData) or client-side (useFetch)
Ask for TypeScript if your project uses it to get type-safe examples
Request specific UI blocks (filters, pagination, forms) to include relevant scaffolding
Review and replace placeholder API endpoints and sample data before production

Example use cases

Create Nuxt product listing page with server-side data fetching and pagination
Generate a product detail page with dynamic route, useAsyncData, and related items section
Scaffold an admin form page that validates inputs and posts to an API
Produce landing pages with hero, feature blocks, and meta tags for SEO
Convert a Figma layout into a componentized Nuxt page skeleton

FAQ

Will the generator create nested route files?

Yes. If you specify a path like products/[id].vue or products/index.vue the output will follow Nuxt file-based routing conventions and include dynamic route examples.

Does it include TypeScript and typing?

You can request TypeScript in the prompt. The skill will produce script setup with TypeScript annotations and example interfaces for fetched data.