nuxt-page-generator_skill
- TypeScript
0
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill ehtbanton/claudeskillsrepo --skill nuxt-page-generator- SKILL.md602 B
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
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.
