nuxt

Guide Nuxt 4+ development with server routes, routing, middleware, and composables.

Updated Jan 29, 2026
One-click install
npx skills add https://github.com/hipi/nuxt-nav-ai --skill nuxt-hipi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt
Source: https://github.com/hipi/nuxt-nav-ai/tree/main/.agents/skills/nuxt
Command: npx skills add https://github.com/hipi/nuxt-nav-ai --skill nuxt-hipi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides progressive guidance for Nuxt 4+ projects, helping developers navigate complex features like server routes, file-based routing, middleware, and composables, ensuring adherence to the latest patterns and conventions.

Core Features & Use Cases

  • Server Routes & Middleware: Understand how to build API endpoints, server middleware, and server utilities using h3 v1.
  • File-Based Routing: Master Nuxt's powerful routing system, including route groups, typed router, and definePage.
  • Composables & Data Fetching: Leverage Nuxt-specific composables like useFetch, useRoute, and useRequestURL for efficient data handling and navigation.
  • Configuration: Configure Nuxt projects effectively using nuxt.config.ts, modules, and runtime config.
  • Use Case: When building a new Nuxt 4 application, use this Skill to understand the correct way to set up API routes, implement authentication middleware, and fetch data efficiently, avoiding common pitfalls and outdated patterns.

Quick Start

Use the nuxt skill to understand how to create a server route for fetching user data.

Frequently Asked Questions about nuxt

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

FAQPage Schema
How do I create server routes using h3 v1 in a Nuxt 4 application?

To create server routes in Nuxt 4, you define API endpoints and server middleware using h3 v1 patterns. This approach ensures adherence to modern conventions, enabling efficient handling of server utilities and requests.

What is the correct way to use composables for data fetching in Nuxt 4?

Composables for data fetching in Nuxt 4 utilize functions like useFetch and useRoute to manage navigation and data retrieval. Leveraging these Nuxt-specific composables ensures efficient data handling and avoids common pitfalls found in outdated patterns.

How does file-based routing work with route groups and definePage in Nuxt?

File-based routing in Nuxt automatically generates routes based on your directory structure. It supports advanced features like route groups and definePage, allowing developers to organize complex application routing logic without manual configuration.

Can I use nitropack v2 configuration patterns for my Nuxt 4 server middleware?

Yes, Nuxt 4 server middleware and utilities rely on nitropack v2 configuration patterns. Understanding these patterns is essential for correctly implementing authentication middleware and building robust API endpoints in modern Nuxt applications.

What are the best practices for configuring runtime config and modules in nuxt.config.ts?

Configuring runtime config and modules in nuxt.config.ts involves defining environment-specific variables and integrating extensions securely. Following Nuxt 4 best practices ensures your project remains maintainable and correctly initializes server and client environments.

Why does my Nuxt 4 data fetching return outdated patterns and how do I fix it?

Outdated data fetching patterns often occur when using older Nuxt conventions instead of useFetch or useRequestURL. Fixing this involves adopting Nuxt 4 specific composables to ensure progressive guidance and modern data handling efficiency.