@nockdev/awf 6.2.0

package/.agent/skills/frameworks/nuxt/data/core.yaml

@@ -0,0 +1,309 @@
+# =============================================================================
+# Nuxt Core Patterns (Feb 2026)
+# =============================================================================
+# Nuxt 4, Data Fetching, App Directory
+
+metadata:
+  skill: nuxt
+  domain: core
+  version: "4"
+  updated: "2026-02-05"
+  patterns_count: 6
+
+patterns:
+  - id: nuxt001
+    name: App Directory Structure
+    category: architecture
+    version: "4+"
+    description: |
+      Nuxt 4's reorganized app/ directory for cleaner projects.
+      Consolidates application code in one location.
+    text: app directory structure pages components layouts
+    example: |
+      # ✅ Nuxt 4: New app/ directory structure
+      my-app/
+      ├── app/
+      │   ├── pages/              # File-based routing
+      │   │   ├── index.vue       # /
+      │   │   ├── about.vue       # /about
+      │   │   └── users/
+      │   │       ├── index.vue   # /users
+      │   │       └── [id].vue    # /users/:id
+      │   ├── components/         # Auto-imported components
+      │   │   ├── AppHeader.vue
+      │   │   └── AppFooter.vue
+      │   ├── layouts/
+      │   │   ├── default.vue
+      │   │   └── admin.vue
+      │   ├── composables/        # Auto-imported composables
+      │   │   └── useAuth.ts
+      │   ├── utils/              # Auto-imported utilities
+      │   └── app.vue             # App entry point
+      ├── server/                 # Nitro server
+      │   ├── api/
+      │   │   └── users.get.ts
+      │   └── middleware/
+      ├── public/
+      ├── nuxt.config.ts
+      └── package.json
+
+      # ✅ Benefits:
+      # - Cleaner separation of concerns
+      # - Faster development server
+      # - Better TypeScript contexts
+    severity: CRITICAL
+    docs_url: https://nuxt.com/docs/getting-started/directory-structure
+
+  - id: nuxt002
+    name: useAsyncData & useFetch
+    category: data-fetching
+    version: "3+"
+    description: |
+      Smart data fetching with automatic caching and sharing.
+      Nuxt 4 returns shallowRef for better performance.
+    text: useAsyncData useFetch data fetch cache shallow ref
+    example: |
+      <script setup lang="ts">
+      // ✅ useFetch for simple API calls
+      const { data: users, pending, error, refresh } = await useFetch('/api/users');
+
+      // ✅ useAsyncData for complex fetching
+      const { data: user } = await useAsyncData('user', () => {
+        return $fetch(`/api/users/${route.params.id}`);
+      });
+
+      // ✅ Nuxt 4: Data sharing with key
+      // Components using same key share data automatically
+      const { data: posts } = await useFetch('/api/posts', {
+        key: 'posts-list',  // Shared across components
+      });
+
+      // ✅ Nuxt 4: shallowRef by default (less reactivity overhead)
+      // Data changes require reassignment, not deep mutation
+      const { data } = await useFetch('/api/data', {
+        deep: true,  // Opt into deep reactivity if needed
+      });
+
+      // ✅ getCachedData for controlling cache
+      const { data } = await useFetch('/api/data', {
+        getCachedData(key) {
+          return nuxtApp.payload.data[key] || nuxtApp.static.data[key];
+        },
+      });
+      </script>
+
+      <template>
+        <div v-if="pending">Loading...</div>
+        <div v-else-if="error">Error: {{ error.message }}</div>
+        <ul v-else>
+          <li v-for="user in users" :key="user.id">{{ user.name }}</li>
+        </ul>
+      </template>
+    severity: CRITICAL
+    docs_url: https://nuxt.com/docs/getting-started/data-fetching
+
+  - id: nuxt003
+    name: Auto-imports
+    category: dx
+    version: "3+"
+    description: Components, composables, utils auto-imported
+    text: auto import components composables utils
+    example: |
+      <!-- ✅ Components from components/ are auto-imported -->
+      <template>
+        <AppHeader />
+        <NuxtPage />
+        <AppFooter />
+      </template>
+
+      <script setup lang="ts">
+      // ✅ Vue APIs auto-imported
+      const count = ref(0);
+      const doubled = computed(() => count.value * 2);
+
+      // ✅ Nuxt composables auto-imported
+      const route = useRoute();
+      const router = useRouter();
+      const { data } = await useFetch('/api/users');
+
+      // ✅ Custom composables from composables/ auto-imported
+      // composables/useAuth.ts
+      export function useAuth() {
+        const user = useState<User | null>('user', () => null);
+        async function login(credentials: Credentials) {
+          // ...
+        }
+        return { user, login };
+      }
+
+      // Usage (no import needed!)
+      const { user, login } = useAuth();
+
+      // ✅ Utilities from utils/ auto-imported (Nuxt 4)
+      // utils/format.ts
+      export function formatDate(date: Date) {
+        return new Intl.DateTimeFormat().format(date);
+      }
+
+      // Usage
+      const formatted = formatDate(new Date());
+      </script>
+    severity: HIGH
+    docs_url: https://nuxt.com/docs/guide/concepts/auto-imports
+
+  - id: nuxt004
+    name: Layouts
+    category: rendering
+    version: "3+"
+    description: Page layouts with slot-based composition
+    text: layout default slot page transition nested
+    example: |
+      <!-- layouts/default.vue -->
+      <template>
+        <div class="min-h-screen">
+          <AppHeader />
+          <main class="container mx-auto py-8">
+            <slot />
+          </main>
+          <AppFooter />
+        </div>
+      </template>
+
+      <!-- layouts/admin.vue -->
+      <template>
+        <div class="flex">
+          <AdminSidebar />
+          <main class="flex-1 p-8">
+            <slot />
+          </main>
+        </div>
+      </template>
+
+      <!-- pages/dashboard.vue -->
+      <script setup>
+      // ✅ Specify layout
+      definePageMeta({
+        layout: 'admin',
+      });
+      </script>
+
+      <template>
+        <h1>Dashboard</h1>
+      </template>
+
+      <!-- ✅ Programmatic layout -->
+      <script setup>
+      const route = useRoute();
+
+      // Change layout based on condition
+      definePageMeta({
+        layout: false,  // Disable layout
+      });
+
+      // Or use setPageLayout
+      setPageLayout('admin');
+      </script>
+    severity: MEDIUM
+    docs_url: https://nuxt.com/docs/guide/directory-structure/layouts
+
+  - id: nuxt005
+    name: Route Middleware
+    category: routing
+    version: "3+"
+    description: Route guards for auth and redirects
+    text: middleware auth guard redirect defineNuxtRouteMiddleware
+    example: |
+      // middleware/auth.ts
+      export default defineNuxtRouteMiddleware((to) => {
+        const { user } = useAuth();
+
+        // ✅ Redirect if not authenticated
+        if (!user.value && to.path !== '/login') {
+          return navigateTo('/login');
+        }
+      });
+
+      // middleware/admin.ts
+      export default defineNuxtRouteMiddleware(() => {
+        const { user } = useAuth();
+
+        if (user.value?.role !== 'admin') {
+          return abortNavigation('Not authorized');
+        }
+      });
+
+      // ✅ Apply to page
+      // pages/dashboard.vue
+      <script setup>
+      definePageMeta({
+        middleware: 'auth',
+      });
+      </script>
+
+      // ✅ Multiple middleware
+      <script setup>
+      definePageMeta({
+        middleware: ['auth', 'admin'],
+      });
+      </script>
+
+      // ✅ Global middleware (runs on every route)
+      // middleware/analytics.global.ts
+      export default defineNuxtRouteMiddleware((to, from) => {
+        analytics.track('page_view', { path: to.path });
+      });
+    severity: HIGH
+    docs_url: https://nuxt.com/docs/guide/directory-structure/middleware
+
+  - id: nuxt006
+    name: NuxtLink & Navigation
+    category: routing
+    version: "3+"
+    description: Client-side navigation with prefetching
+    text: NuxtLink navigateTo prefetch router push replace
+    example: |
+      <template>
+        <!-- ✅ NuxtLink for client-side navigation -->
+        <NuxtLink to="/">Home</NuxtLink>
+        <NuxtLink to="/about">About</NuxtLink>
+
+        <!-- Dynamic route -->
+        <NuxtLink :to="`/users/${user.id}`">
+          {{ user.name }}
+        </NuxtLink>
+
+        <!-- With params -->
+        <NuxtLink :to="{ name: 'users-id', params: { id: user.id } }">
+          Profile
+        </NuxtLink>
+
+        <!-- ✅ Prefetch control -->
+        <NuxtLink to="/heavy-page" :prefetch="false">
+          Don't prefetch
+        </NuxtLink>
+
+        <!-- External link -->
+        <NuxtLink to="https://nuxt.com" external target="_blank">
+          Nuxt Website
+        </NuxtLink>
+      </template>
+
+      <script setup lang="ts">
+      // ✅ Programmatic navigation
+      const router = useRouter();
+
+      function goToUser(id: string) {
+        navigateTo(`/users/${id}`);
+      }
+
+      // With replace (no history entry)
+      navigateTo('/dashboard', { replace: true });
+
+      // External redirect
+      navigateTo('https://nuxt.com', { external: true });
+
+      // With route object
+      navigateTo({ name: 'users-id', params: { id: '123' } });
+      </script>
+    severity: MEDIUM
+    docs_url: https://nuxt.com/docs/api/components/nuxt-link

package/.agent/skills/frameworks/nuxt/data/server.yaml

@@ -0,0 +1,271 @@
+# =============================================================================
+# Nuxt Server Patterns (Feb 2026)
+# =============================================================================
+# Nitro, Server Routes, Runtime Config
+
+metadata:
+  skill: nuxt
+  domain: server
+  version: "4"
+  updated: "2026-02-05"
+  patterns_count: 5
+
+patterns:
+  - id: nuxt007
+    name: Server Routes (Nitro)
+    category: api
+    version: "3+"
+    description: File-based API routes powered by Nitro
+    text: server api route nitro get post defineEventHandler
+    example: |
+      // server/api/users.get.ts
+      // ✅ GET /api/users
+      export default defineEventHandler(async (event) => {
+        const users = await db.user.findMany();
+        return users;
+      });
+
+      // server/api/users.post.ts
+      // ✅ POST /api/users
+      export default defineEventHandler(async (event) => {
+        const body = await readBody(event);
+        const user = await db.user.create({ data: body });
+        return user;
+      });
+
+      // server/api/users/[id].get.ts
+      // ✅ GET /api/users/:id
+      export default defineEventHandler(async (event) => {
+        const id = getRouterParam(event, 'id');
+        const user = await db.user.findUnique({ where: { id } });
+
+        if (!user) {
+          throw createError({
+            statusCode: 404,
+            message: 'User not found',
+          });
+        }
+
+        return user;
+      });
+
+      // ✅ Query parameters
+      export default defineEventHandler((event) => {
+        const query = getQuery(event);
+        const page = Number(query.page) || 1;
+        const limit = Number(query.limit) || 10;
+        // ...
+      });
+
+      // ✅ Headers and cookies
+      export default defineEventHandler((event) => {
+        const auth = getHeader(event, 'authorization');
+        const sessionId = getCookie(event, 'session');
+        // ...
+      });
+    severity: CRITICAL
+    docs_url: https://nuxt.com/docs/guide/directory-structure/server
+
+  - id: nuxt008
+    name: Runtime Config
+    category: configuration
+    version: "3+"
+    description: Environment variables with type-safe access
+    text: runtime config env secret public private useRuntimeConfig
+    example: |
+      // nuxt.config.ts
+      export default defineNuxtConfig({
+        runtimeConfig: {
+          // ✅ Private (server-only)
+          apiSecret: process.env.API_SECRET,
+          databaseUrl: process.env.DATABASE_URL,
+
+          // ✅ Public (client & server)
+          public: {
+            apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api',
+            appName: 'My App',
+          },
+        },
+      });
+
+      // ✅ Server-side access
+      // server/api/secret.get.ts
+      export default defineEventHandler((event) => {
+        const config = useRuntimeConfig(event);
+
+        // Access private config
+        const secret = config.apiSecret;  // ✅ Only on server
+        const dbUrl = config.databaseUrl;
+
+        // Access public config
+        const apiBase = config.public.apiBase;
+
+        return { status: 'ok' };
+      });
+
+      // ✅ Client-side access
+      // pages/index.vue
+      <script setup>
+      const config = useRuntimeConfig();
+
+      // ⚠️ Only public config available on client
+      const apiBase = config.public.apiBase;
+      const appName = config.public.appName;
+
+      // ❌ This would be undefined on client
+      // const secret = config.apiSecret;
+      </script>
+    severity: HIGH
+    docs_url: https://nuxt.com/docs/guide/going-further/runtime-config
+
+  - id: nuxt009
+    name: Server Middleware
+    category: server
+    version: "3+"
+    description: Server-level middleware for requests
+    text: server middleware request response handler nitro
+    example: |
+      // server/middleware/log.ts
+      // ✅ Runs on every server request
+      export default defineEventHandler((event) => {
+        console.log('Request:', event.node.req.url);
+        // Don't return anything to continue to next handler
+      });
+
+      // server/middleware/auth.ts
+      export default defineEventHandler(async (event) => {
+        // Skip for public routes
+        if (event.path.startsWith('/api/public')) {
+          return;
+        }
+
+        // ✅ Validate auth token
+        const token = getHeader(event, 'authorization')?.split(' ')[1];
+
+        if (!token) {
+          throw createError({
+            statusCode: 401,
+            message: 'Unauthorized',
+          });
+        }
+
+        try {
+          const user = await verifyToken(token);
+          event.context.auth = { user };  // Attach to context
+        } catch {
+          throw createError({
+            statusCode: 401,
+            message: 'Invalid token',
+          });
+        }
+      });
+
+      // ✅ Access auth in route handlers
+      // server/api/protected.get.ts
+      export default defineEventHandler((event) => {
+        const { user } = event.context.auth;
+        return { message: `Hello ${user.name}` };
+      });
+    severity: MEDIUM
+    docs_url: https://nuxt.com/docs/guide/directory-structure/server#server-middleware
+
+  - id: nuxt010
+    name: Nitro Caching
+    category: caching
+    version: "4+"
+    description: |
+      Nuxt 4 leverages Nitro for improved caching.
+      Better server performance and faster builds.
+    text: nitro cache caching storage preset deployment
+    example: |
+      // nuxt.config.ts
+      export default defineNuxtConfig({
+        nitro: {
+          // ✅ Route caching
+          routeRules: {
+            '/api/users': { cache: { maxAge: 60 } },
+            '/api/static/**': { cache: { maxAge: 60 * 60 } },
+            '/admin/**': { ssr: false },  // Client-side only
+          },
+
+          // ✅ Storage (for KV, caching)
+          storage: {
+            cache: {
+              driver: 'redis',
+              url: process.env.REDIS_URL,
+            },
+          },
+        },
+      });
+
+      // ✅ Cached API routes
+      // server/api/cached-data.get.ts
+      export default defineCachedEventHandler(async (event) => {
+        // This result is cached
+        const data = await expensiveOperation();
+        return data;
+      }, {
+        maxAge: 60 * 5,  // 5 minutes
+        staleMaxAge: 60 * 60,  // Serve stale while revalidating
+        swr: true,  // Stale-while-revalidate
+      });
+
+      // ✅ Cached function
+      const getCachedUser = defineCachedFunction(
+        async (id: string) => {
+          return await db.user.findUnique({ where: { id } });
+        },
+        {
+          maxAge: 60,
+          getKey: (id) => `user:${id}`,
+        }
+      );
+    severity: MEDIUM
+    docs_url: https://nitro.unjs.io/guide/cache
+
+  - id: nuxt011
+    name: Nuxt 4 Performance
+    category: performance
+    version: "4+"
+    description: |
+      Nuxt 4 performance improvements.
+      Shared payload, faster HMR, shallow refs.
+    text: performance hmr hot reload payload shallow fast
+    example: |
+      // ✅ Nuxt 4 Performance Improvements
+
+      // 1. Shared payload for faster builds
+      // Automatically deduplicates data across pages
+
+      // 2. shallowRef by default
+      // Less reactivity overhead for data fetching
+      const { data } = await useFetch('/api/data');
+      // data.value is a shallowRef - mutate via reassignment
+
+      // 3. Faster HMR
+      // Internal sockets and native file watching
+
+      // 4. Better font handling
+      // nuxt.config.ts
+      export default defineNuxtConfig({
+        // ✅ @nuxt/fonts auto-optimizes fonts
+        fonts: {
+          defaults: {
+            weights: [400, 500, 600, 700],
+          },
+        },
+      });
+
+      // 5. Payload compression
+      // Enabled by default, reduces hydration data
+
+      // 6. TypeScript improvements
+      // Separate contexts for app, server, and shared code
+
+      // ✅ Best practices
+      // - Use shallowRef unless deep reactivity needed
+      // - Leverage route-based code splitting
+      // - Use setup instead of Options API
+      // - Prefer useFetch over $fetch in components
+    severity: MEDIUM
+    docs_url: https://nuxt.com/blog/nuxt4