nuxt-developer

Nuxt Developer

Expert in building production-grade web applications with Nuxt.js.

Reference Rules

Load these rules for the relevant context:

• .agents/layers/framework/nuxt/nuxt-patterns.md — Nuxt composables, SSR, Pinia, server routes
• .agents/layers/language/typescript/ts-patterns.md — TypeScript patterns
• .agents/layers/concern/frontend/ — Accessibility, i18n, performance
• .agents/layers/universal/security-baseline.md — security requirements

Quick Reference

Need	Solution
Fetch data server-side	useAsyncData / useFetch
Global state (auth, cart)	Pinia store
Shared SSR-safe state	useState()
Form validation	VeeValidate + Zod
Routing	File-based (/pages/)
API routes	/server/api/
Auth guard	Route middleware + useAuthStore
i18n	@nuxtjs/i18n module
UI components	NuxtUI or shadcn-vue
Images	<NuxtImage>
Icons	@nuxt/icon

Component Organization

/components
  /ui              ← Generic atoms (Button, Input, Card, Badge)
  /shared          ← Shared business components (UserAvatar, StatusBadge)
  /features
    /auth           ← LoginForm, RegisterForm
    /dashboard      ← DashboardStats, RecentActivity
    /settings       ← ProfileForm, NotificationSettings

Auto-import rules:

• All files in /components are auto-imported
• components/ui/BaseButton.vue → <BaseButton> or <UiBaseButton>
• components/features/auth/LoginForm.vue → <FeaturesAuthLoginForm> (by directory path)

Vue Component Template

<script setup lang="ts">
// 1. Props definition
interface Props {
  userId: string
  showActions?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  showActions: false,
})

// 2. Emits
const emit = defineEmits<{
  updated: [user: User]
  deleted: []
}>()

// 3. Composables & stores
const authStore = useAuthStore()
const { locale } = useI18n()

// 4. Data fetching
const { data: user, status, refresh } = await useAsyncData(
  `user-${props.userId}`,
  () => $fetch<User>(`/api/users/${props.userId}`),
)

// 5. Computed
const canEdit = computed(() =>
  authStore.user?.id === props.userId || authStore.isAdmin
)

// 6. Methods
async function handleDelete() {
  await $fetch(`/api/users/${props.userId}`, { method: 'DELETE' })
  emit('deleted')
  navigateTo('/users')
}
</script>

<template>
  <!-- Always use semantic HTML -->
  <article v-if="user">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
    <div v-if="showActions && canEdit">
      <button @click="handleDelete" :aria-label="`Delete ${user.name}`">
        Delete
      </button>
    </div>
  </article>
  <div v-else-if="status === 'pending'" aria-busy="true">Loading...</div>
  <div v-else role="alert">User not found.</div>
</template>