nuxt

Configure Nuxt applications with routing, SSR, and module creation instructions.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/hopkins385/sandbox-platform --skill nuxt-hopkins385
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt
Source: https://github.com/hopkins385/sandbox-platform/tree/main/.agents/skills/nuxt
Command: npx skills add https://github.com/hopkins385/sandbox-platform --skill nuxt-hopkins385

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides detailed instructions and reference material to assist developers in building and maintaining Nuxt applications efficiently.

Core Features & Use Cases

  • Framework Setup and Configuration: Guides on setting up nuxt.config.ts, app.config.ts, and environment variables.
  • Routing and Layouts: Instructions for managing file-based routing, dynamic routes, layouts, middleware, and navigation.
  • Data Fetching and SSR: Best practices for useFetch, useAsyncData, and SSR safety.
  • Deployment and Optimization: Tips on deploying Nuxt apps to various environments and optimizing build output.
  • Component Auto-imports & Lazy Loading: Strategies for component organization, auto-import, and code-splitting.
  • Module Development: Step-by-step on creating publishable modules with dependencies, hooks, and virtual files.
  • Advanced Features: Layer management, hooks, pre-rendering, and routing rules.

Quick Start

Read the official Nuxt documentation to understand project setup, configuration, and core concepts to quickly get your application running.

Frequently Asked Questions about nuxt

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

FAQPage Schema
How do I configure routing and layouts in a Nuxt application?

Nuxt routing and layouts are managed through file-based routing, dynamic routes, and middleware. You can organize navigation and apply layouts automatically by structuring your Vue components within the designated directories.

What is the best way to handle data fetching and SSR safety in Nuxt?

Data fetching and SSR safety in Nuxt are handled using useFetch and useAsyncData. These composables ensure best practices for server-side rendering by preventing hydration mismatches and managing asynchronous data state effectively.

How do I deploy and optimize a Nuxt app for serverless environments?

Deploying and optimizing a Nuxt app for serverless environments involves configuring build outputs and applying specific routing rules. You must adjust configuration files to ensure the application performs efficiently across various deployment targets.

Can I use auto-imports and lazy loading for Vue components in Nuxt?

Yes, Nuxt supports component auto-imports and lazy loading to streamline Vue development. By organizing components in specific directories, you enable automatic imports and code-splitting strategies to optimize your application's load performance.

How do I create publishable Nuxt modules with hooks and virtual files?

Creating publishable Nuxt modules requires defining dependencies, integrating hooks, and generating virtual files. This process extends the framework's core functionality by allowing you to inject custom logic and assets into the build pipeline.

What are the prerequisites for effectively using Nuxt framework configuration files?

Effectively using Nuxt framework configuration files demands familiarity with nuxt.config.ts and app.config.ts. You must understand server and client distinctions to properly manage environment variables and setup challenges.