Vue Nuxt

Vue Nuxt Skill

Production-grade skill for mastering Nuxt 3 and building full-stack Vue applications.

Purpose

Single Responsibility: Teach Nuxt 3 architecture including SSR/SSG, Nitro server, modules, auto-imports, and deployment strategies.

Parameter Schema

interface NuxtParams {
  topic: 'config' | 'ssr' | 'ssg' | 'api' | 'modules' | 'deploy' | 'all';
  level: 'beginner' | 'intermediate' | 'advanced';
  context?: {
    hosting?: 'vercel' | 'netlify' | 'cloudflare' | 'node';
    rendering?: 'ssr' | 'ssg' | 'hybrid';
  };
}

Learning Modules

Module 1: Nuxt Fundamentals

Prerequisites: vue-fundamentals, vue-composition-api
Duration: 3-4 hours
Outcome: Set up and configure Nuxt 3

Module 2: File-Based Routing

Prerequisites: Module 1
Duration: 2 hours
Outcome: Master Nuxt routing conventions

Page Metadata:

<script setup>
definePageMeta({
  layout: 'admin',
  middleware: ['auth'],
  title: 'Dashboard'
})
</script>

Module 3: Data Fetching

Prerequisites: Module 2
Duration: 3-4 hours
Outcome: Fetch data correctly in Nuxt

Fetching Patterns:

// Block navigation
const { data } = await useFetch('/api/user')

// Non-blocking
const { data, pending } = useLazyFetch('/api/posts')

// With transform
const { data } = await useAsyncData('user',
  () => $fetch('/api/user'),
  { transform: (d) => d.user }
)

Module 4: Server API (Nitro)

Prerequisites: Module 3
Duration: 3-4 hours
Outcome: Build server API routes

API Route Example:

// server/api/users/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')

  if (!id) {
    throw createError({ statusCode: 400, message: 'ID required' })
  }

  const user = await db.user.findUnique({ where: { id } })

  if (!user) {
    throw createError({ statusCode: 404, message: 'Not found' })
  }

  return user
})

Module 5: Rendering & Deployment

Prerequisites: Modules 1-4
Duration: 3 hours
Outcome: Deploy Nuxt applications

Deployment Targets:

Validation Checkpoints

Beginner Checkpoint

• Create Nuxt app with pages
• Use auto-imported composables
• Fetch data with useFetch
• Create basic API route

Intermediate Checkpoint

• Build dynamic routes with params
• Implement middleware
• Create CRUD API routes
• Use layouts and error pages

Advanced Checkpoint

• Configure hybrid rendering
• Implement auth with middleware
• Deploy to production
• Optimize performance

Retry Logic

const skillConfig = {
  maxAttempts: 3,
  backoffMs: [1000, 2000, 4000],
  onFailure: 'simplify_config'
}

Observability

tracking:
  - event: project_created
    data: [template, modules]
  - event: api_route_built
    data: [method, path]
  - event: deployed
    data: [platform, render_mode]

Troubleshooting

Common Issues

Debug Steps

1. Check Nuxt DevTools
2. Review server/api logs
3. Verify nuxt.config.ts
4. Test API routes directly

Unit Test Template

import { describe, it, expect } from 'vitest'
import { setup, $fetch } from '@nuxt/test-utils'

describe('API Routes', async () => {
  await setup({ server: true })

  it('returns users', async () => {
    const users = await $fetch('/api/users')
    expect(Array.isArray(users)).toBe(true)
  })

  it('returns 404 for missing user', async () => {
    const response = await $fetch('/api/users/999', {
      ignoreResponseError: true
    })
    expect(response.statusCode).toBe(404)
  })
})

Usage

Skill("vue-nuxt")

Related Skills

• vue-composition-api - Prerequisite
• vue-testing - Testing Nuxt apps
• vue-typescript - Type-safe Nuxt

Resources

• Nuxt 3 Documentation
• Nitro Documentation
• Nuxt Modules