skills.rest
ps-carvalho
ps-carvalhoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nuxt-patterns

Provide Nuxt 3 patterns for auto-imports, Nitro routes, and data fetching.

Updated Mar 12, 2026
Search Tags:#web development#full-stack#vue#ssr#composables#nuxt#nitro
One-click install
npx skills add https://github.com/ps-carvalho/spavn-agents --skill nuxt-patterns-ps-carvalho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-patterns
Source: https://github.com/ps-carvalho/spavn-agents/tree/main/.opencode/skills/nuxt-patterns
Command: npx skills add https://github.com/ps-carvalho/spavn-agents --skill nuxt-patterns-ps-carvalho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide to modern Nuxt 3 development, enabling developers to build efficient, scalable, and maintainable full-stack Vue applications.

Core Features & Use Cases

  • Nuxt 3 Best Practices: Covers auto-imports, Nitro server routes, composables, and rendering modes.
  • Data Fetching Strategies: Demonstrates useAsyncData, useFetch, and useLazyFetch.
  • SSR/SSG/SPA Configuration: Explains how to configure rendering modes and route rules.
  • Use Case: A developer starting a new Nuxt 3 project can use this Skill to quickly understand and implement essential patterns for auto-imports, server API routes, and data fetching, accelerating their development process.

Quick Start

Use the nuxt-patterns skill to generate a basic Nuxt 3 project structure with auto-imports configured.

Frequently Asked Questions about nuxt-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What's the best way to structure data fetching in a Nuxt 3 full-stack application?▼

Data fetching in Nuxt 3 is best handled using useAsyncData and useFetch composables to manage server-side rendering and hydration. These patterns ensure efficient data loading and prevent duplicate client-server requests during universal rendering.

How do I create server API routes using Nitro in a Nuxt 3 project?▼

Nitro server routes in Nuxt 3 are created by adding TypeScript files to the server/api directory, which automatically generate API endpoints. This allows full-stack Vue applications to handle backend logic without an external server framework.

How does universal rendering work, and when should I configure different rendering modes?▼

Universal rendering in Nuxt 3 sends fully rendered HTML from the server to the client on first request, improving SEO and performance. You configure route rules to switch between SSR, SSG, and SPA modes based on specific page requirements.

Can I use auto-imports for composables and plugins in Nuxt 3 development?▼

Yes, Nuxt 3 auto-imports composables, plugins, and utility functions from designated directories without manual import statements. This streamlines full-stack development by automatically exposing Vue and Nuxt APIs across your components and pages.

What patterns should I follow for state management and middleware in Nuxt 3?▼

State management and middleware patterns in Nuxt 3 involve using built-in composables for shared state and creating route middleware files to protect navigation. This ensures scalable application architecture and proper authentication handling.

Related Skills

Explore More Software Engineering Skills→
changjian-wangchangjian-wang

deployment

Generates Dockerfiles and docker-compose configs for .NET 8 and Vue 3 apps.

Community
Intermediate
sduduzogsduduzog

nuxt

Build and deploy full-stack Vue apps with Nuxt SSR and Nitro routes.

Community
Advanced
symbiosikasymbiosika

frontend-app

Scaffold and edit Vue 3 components and views with Vite and Tailwind CSS v4.

Official
Advanced
docaohieu2808docaohieu2808

web-frameworks

Scaffold Next.js projects with Turborepo monorepo management and RemixIcon integration.

Community
Intermediate