nuxt-development

Apply Nuxt.js 3 standards for routing, SSR, data fetching, and middleware.

Updated Mar 13, 2026
One-click install
npx skills add https://github.com/devbyray/nuxt-layers-component-lib-poc --skill nuxt-development-devbyray
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt-development
Source: https://github.com/devbyray/nuxt-layers-component-lib-poc/tree/main/.github/skills/nuxt-development
Command: npx skills add https://github.com/devbyray/nuxt-layers-component-lib-poc --skill nuxt-development-devbyray

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide and set of standards for developing Nuxt.js 3 applications, ensuring efficient development, maintainability, and adherence to best practices.

Core Features & Use Cases

  • Structured Development: Follows Nuxt's conventions for pages, layouts, components, and composables.
  • SSR & Data Fetching: Implements server-side rendering and efficient data fetching patterns.
  • API Routes & Middleware: Guides the creation of server endpoints and route middleware.
  • Use Case: When starting a new Nuxt 3 project, use this Skill to set up the directory structure, understand auto-import conventions, and implement SSR data fetching for your pages.

Quick Start

Apply these standards when developing Nuxt.js 3 applications, following the provided directory structure and guidelines for pages, layouts, and composables.

Frequently Asked Questions about nuxt-development

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

FAQPage Schema
How do I set up directory structure and auto-import conventions for a new Nuxt 3 project?

To set up a new Nuxt 3 project, follow Nuxt's conventions for pages, layouts, components, and composables to leverage auto-imports. This structured development approach ensures efficient project scaffolding and maintainability by adhering to the framework's standard directory structure.

What is the best way to implement server-side rendering and data fetching in Nuxt.js?

The best way to implement server-side rendering (SSR) in Nuxt.js is by using the framework's built-in SSR capabilities and efficient data fetching patterns. This approach ensures optimized performance and proper rendering of your Vue components on the server before client hydration.

How do I create API routes and route middleware in a Nuxt.js 3 application?

You create API routes and route middleware in Nuxt.js 3 by utilizing the server directory to define server endpoints and establishing middleware to control route access. This provides standardized patterns for building backend functionality and managing request flows.

Does Nuxt.js 3 work well with TypeScript for web development?

Yes, Nuxt.js 3 works seamlessly with TypeScript for web development, providing standards and best practices that ensure type safety. Using TypeScript enhances your Vue components, composables, and server-side rendering code with robust type checking.

When do I need to use specific composables and middleware in Nuxt development?

You need to use composables and middleware in Nuxt development when extracting reusable logic and controlling route navigation. Composables manage state and data fetching, while middleware guards routes, ensuring structured and maintainable application behavior.

What are the limitations or configuration management challenges when using Nuxt SSR capabilities?

Nuxt SSR capabilities require careful configuration management to handle SSG and server-side data fetching limitations. Adhering to Nuxt-specific patterns ensures you avoid common pitfalls during deployment and maintain efficient rendering across environments.