Vue

Based on Vue 3.5. Always use Composition API with <script setup lang="ts">.

Preferences

• Prefer TypeScript over JavaScript
• Prefer <script setup lang="ts"> over <script>
• For performance, prefer shallowRef over ref if deep reactivity is not needed
• Always use Composition API over Options API
• Discourage using Reactive Props Destructure

Core

Features

Quick Reference

Component Template

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(() => props.title, (newVal) => {
  console.log('Title changed:', newVal)
})

onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <div>{{ title }} - {{ doubled }}</div>
</template>

Key Imports

// Reactivity
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// Lifecycle
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'

Nuxt 4+ Development

Progressive guidance for Nuxt 4+ projects (v4.3+) with latest patterns and conventions.

When to Use

Working with:

• Server routes (API endpoints, server middleware, server utils)
• File-based routing (pages, layouts, route groups)
• Nuxt middleware (route guards, navigation)
• Nuxt plugins (app extensions)
• Nuxt-specific features (auto-imports, layers, modules)

Available Guidance

Read specific files based on current work:

• references/server.md - API routes, server middleware, validation (Zod), WebSocket, SSE
• references/routing.md - File-based routing, route groups, typed router, definePage
• references/middleware-plugins.md - Route middleware, plugins, app lifecycle
• references/nuxt-composables.md - Nuxt composables (useRequestURL, useFetch, navigation)
• references/nuxt-components.md - NuxtLink, NuxtImg, NuxtTime (prefer over HTML elements)
• references/nuxt-config.md - Configuration, modules, auto-imports, layers

For Vue composables: See vue skill composables.md (VueUse, Composition API patterns) For UI components: use nuxt-ui skill For database/storage: use nuxthub skill For content-driven sites: use nuxt-content skill For creating modules: use nuxt-modules skill For project scaffolding/CI: use ts-library skill

Loading Files

Consider loading these reference files based on your task:

• references/server.md - if creating API endpoints or server middleware
• references/routing.md - if setting up pages, layouts, or route groups
• references/nuxt-composables.md - if using Nuxt composables (useFetch, useRequestURL, etc.)
• references/middleware-plugins.md - if working with middleware or plugins
• references/nuxt-components.md - if using Nuxt components (NuxtLink, NuxtImg, etc.)
• references/nuxt-config.md - if editing nuxt.config.ts
• references/project-setup.md - if setting up CI/ESLint/build tools

DO NOT load all files at once. Load only what's relevant to your current task.

Quick Start

// server/api/hello.get.ts
import { z } from "zod";

export default defineEventHandler(async (event) => {
    const { name } = await getValidatedQuery(
        event,
        z.object({
            name: z.string().default("world"),
        }).parse,
    );
    return { message: `Hello ${name}` };
});

Nuxt 4 vs Older Versions

You are working with Nuxt 4+. Key differences:

If you're unsure about Nuxt 4 patterns, read the relevant guidance file first.

Latest Documentation

When to fetch latest docs:

• New Nuxt 4 features not covered here
• Module-specific configuration
• Breaking changes or deprecations
• Advanced use cases

Official sources:

• Nuxt: https://nuxt.com/docs
• h3 (server engine): https://v1.h3.dev/
• Nitro: https://nitro.build/

Token Efficiency

Main skill: ~300 tokens. Each sub-file: ~800-1500 tokens. Only load files relevant to current task.