Nuxt Skills

Project layout

• •Source directory: Prefer srcDir: 'app' so app/ holds pages, components, composables, layouts, middleware. Reference as ~/ (e.g. ~/components/, ~/composables/).
• •Pages: app/pages/*.vue — file-based routing. Use definePageMeta({ middleware: 'auth' }) for route-level middleware.
• •Layouts: app/layouts/default.vue (or named). Use <NuxtLayout> or app.vue to wrap content.
• •Components: app/components/ — auto-imported; use PascalCase names in templates.

Composables

• •Location: app/composables/*.ts — auto-imported. Export functions named useXxx.
• •Pattern: Accept Ref<T> | T for flexibility; normalize with typeof x === 'string' ? ref(x) : x when needed.
• •Data fetching: Prefer useAsyncData with a unique key (e.g. time-blocks-${uid}-${day}), async fetcher, and watch for reactive params. Return { data, refresh, pending }.

Data and server

• •useAsyncData: Use for client-side fetches that depend on reactive state. Key must be unique per logical query; include reactive identifiers in the key.
• •useFetch: Use when the URL/params are the only input; for Supabase or custom clients, useAsyncData + client call is usually clearer.
• •Lazy: Prefer non-lazy by default for above-the-fold data; use lazy: true when appropriate for secondary content.

Auth and routing

• •Supabase user: useSupabaseUser() in middleware or setup. Redirect with navigateTo('/login') when unauthenticated.
• •Middleware: app/middleware/*.ts — export default defineNuxtRouteMiddleware((to, from) => { ... }). Name file for usage (e.g. auth.ts → middleware: 'auth').

Config (nuxt.config.ts)

• •defineNuxtConfig: Set compatibilityDate, srcDir, modules, and module options (e.g. supabase, pwa, app.head).
• •Aliases: ~ and @ typically point to srcDir; use ~/ for app code.

Conventions

• •Use <script setup lang="ts"> in Vue SFCs.
• •Prefer composables for shared state and side effects; keep pages thin and delegate to components and composables.
• •Use ref/computed/watch from Vue; no need to import when using auto-imports (Nuxt provides them).