skills.rest
Thiritin
ThiritinCOMMUNITY
Explore all skills by this author →
GitHub

nuxt-expert

Configure Nuxt 3 SSR/SSG apps with server routes and useFetch.

Updated Aug 27, 2026
Search Tags:#seo#ssr#ssg#nuxt#data-fetching#nitro#nuxt3
One-click install
npx skills add https://github.com/Thiritin/skills --skill nuxt-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-expert
Source: https://github.com/Thiritin/skills/tree/main/nuxt-expert
Command: npx skills add https://github.com/Thiritin/skills --skill nuxt-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Nuxt 3 applications often require careful orchestration of SSR/SSG rendering, Nitro-based server routes, middleware, and SEO-friendly configuration. This skill provides expert guidance, patterns, and best practices to architect and implement robust Nuxt 3 projects.

Core Features & Use Cases

  • SSR/SSG/hybrid rendering strategies for Nuxt 3 apps
  • Data fetching with useFetch and useAsyncData, plus error handling and hydration safety
  • Nitro server engine, server routes, and API endpoints
  • SEO optimization via definePageMeta and structured metadata
  • Middleware, layouts, and authentication scaffolding for complex apps

Quick Start

Set up a Nuxt 3 project with SSR/SSG configuration, add a sample server route under server/routes, and implement a page using useFetch/useAsyncData with definePageMeta.

Frequently Asked Questions about nuxt-expert

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

FAQPage Schema
How do I handle data fetching in Nuxt 3 SSR without hydration mismatches?▼

To handle data fetching in Nuxt 3 SSR safely, use useFetch or useAsyncData with proper error handling. This ensures server-side data is serialized and transferred correctly to the client, preventing hydration mismatches.

What is the best way to configure SEO metadata in a Nuxt 3 application?▼

The best way to configure SEO metadata in Nuxt 3 is by using definePageMeta within your script setup. This approach allows you to define structured, SEO-friendly metadata directly on your pages for optimal search engine rendering.

How do I create server API endpoints using Nitro in Nuxt 3?▼

To create server API endpoints using Nitro in Nuxt 3, define your server routes under the server/routes directory. This integrates directly with the Nitro server engine to build production-grade, serverless-ready endpoints.

Does Nuxt 3 support hybrid rendering strategies for static and server-side pages?▼

Nuxt 3 supports hybrid rendering strategies, allowing you to mix SSG and SSR within the same application. This enables optimized rendering configurations tailored to each page's specific performance and SEO requirements.

Why should I use useState for state management in Nuxt 3 instead of standard Pinia or Vuex?▼

Use useState for state management in Nuxt 3 to ensure SSR-safe state serialization. Unlike standard stores, it specifically prevents cross-request state pollution during server-side rendering by maintaining a scoped state per request.

Related Skills

Explore More Software Engineering Skills→
danghungtb26danghungtb26
3

project-conventions

Enforce naming and folder structure conventions for React TypeScript admin templates.

Community
Basic
sduduzogsduduzog

nuxt

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

Community
Advanced
xvaaraxvaara

nuxt-ui

Integrate Nuxt UI components into Nuxt 4 projects with Tailwind Variants theming.

Community
Advanced
messebmesseb

astro

Provides guidance on Astro best practices for Islands Architecture and Content Collections.

Community
Intermediate