aico-cli 2.1.1 → 2.1.23

package/templates/skills/nuxt/references/features-components-autoimport.md

@@ -0,0 +1,328 @@
+---
+name: components-auto-imports
+description: Auto-imported components, lazy loading, and hydration strategies
+---
+
+# Components Auto-imports
+
+Nuxt automatically imports Vue components from `app/components/` directory.
+
+## Basic Auto-imports
+
+```
+components/
+├── Button.vue         → <Button />
+├── Card.vue           → <Card />
+└── AppHeader.vue      → <AppHeader />
+```
+
+```vue
+<template>
+  <!-- No imports needed -->
+  <AppHeader />
+  <Card>
+    <Button>Click me</Button>
+  </Card>
+</template>
+```
+
+## Naming Conventions
+
+### Nested Directory Names
+
+Component names include directory path:
+
+```
+components/
+├── base/
+│   └── Button.vue       → <BaseButton />
+├── form/
+│   ├── Input.vue        → <FormInput />
+│   └── Select.vue       → <FormSelect />
+└── ui/
+    └── modal/
+        └── Dialog.vue   → <UiModalDialog />
+```
+
+### Disable Path Prefix
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  components: [
+    {
+      path: '~/components',
+      pathPrefix: false, // Use filename only
+    },
+  ],
+})
+```
+
+With `pathPrefix: false`:
+```
+components/base/Button.vue → <Button />
+```
+
+## Lazy Loading
+
+Prefix with `Lazy` for dynamic imports:
+
+```vue
+<script setup lang="ts">
+const showChart = ref(false)
+</script>
+
+<template>
+  <!-- Component code loaded only when rendered -->
+  <LazyHeavyChart v-if="showChart" />
+  <button @click="showChart = true">Show Chart</button>
+</template>
+```
+
+Benefits:
+- Reduces initial bundle size
+- Code-splits component into separate chunk
+- Loads on-demand
+
+## Lazy Hydration Strategies
+
+Control when lazy components become interactive:
+
+### `hydrate-on-visible`
+
+Hydrate when component enters viewport:
+
+```vue
+<template>
+  <LazyComments hydrate-on-visible />
+</template>
+```
+
+### `hydrate-on-idle`
+
+Hydrate when browser is idle:
+
+```vue
+<template>
+  <LazyAnalytics hydrate-on-idle />
+</template>
+```
+
+### `hydrate-on-interaction`
+
+Hydrate on user interaction:
+
+```vue
+<template>
+  <!-- Hydrates on click, focus, or pointerenter -->
+  <LazyDropdown hydrate-on-interaction />
+
+  <!-- Specific event -->
+  <LazyTooltip hydrate-on-interaction="mouseover" />
+</template>
+```
+
+### `hydrate-on-media-query`
+
+Hydrate when media query matches:
+
+```vue
+<template>
+  <LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
+</template>
+```
+
+### `hydrate-after`
+
+Hydrate after delay (milliseconds):
+
+```vue
+<template>
+  <LazyAds :hydrate-after="3000" />
+</template>
+```
+
+### `hydrate-when`
+
+Hydrate on condition:
+
+```vue
+<script setup lang="ts">
+const isReady = ref(false)
+</script>
+
+<template>
+  <LazyEditor :hydrate-when="isReady" />
+</template>
+```
+
+### `hydrate-never`
+
+Never hydrate (static only):
+
+```vue
+<template>
+  <LazyStaticFooter hydrate-never />
+</template>
+```
+
+### Hydration Event
+
+```vue
+<template>
+  <LazyChart hydrate-on-visible @hydrated="onChartReady" />
+</template>
+
+<script setup>
+function onChartReady() {
+  console.log('Chart is now interactive')
+}
+</script>
+```
+
+## Client/Server Components
+
+### Client-only (`.client.vue`)
+
+```
+components/
+└── BrowserChart.client.vue
+```
+
+```vue
+<template>
+  <!-- Only rendered in browser -->
+  <BrowserChart />
+</template>
+```
+
+### Server-only (`.server.vue`)
+
+```
+components/
+└── ServerMarkdown.server.vue
+```
+
+```vue
+<template>
+  <!-- Rendered on server, not hydrated -->
+  <ServerMarkdown :content="markdown" />
+</template>
+```
+
+Requires experimental flag:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  experimental: {
+    componentIslands: true,
+  },
+})
+```
+
+### Paired Components
+
+```
+components/
+├── Comments.client.vue  # Browser version
+└── Comments.server.vue  # SSR version
+```
+
+Server version renders during SSR, client version takes over after hydration.
+
+## Dynamic Components
+
+```vue
+<script setup lang="ts">
+import { SomeComponent } from '#components'
+
+const dynamicComponent = resolveComponent('MyButton')
+</script>
+
+<template>
+  <component :is="dynamicComponent" />
+  <component :is="SomeComponent" />
+</template>
+```
+
+## Direct Imports
+
+Bypass auto-imports when needed:
+
+```vue
+<script setup lang="ts">
+import { LazyMountainsList, NuxtLink } from '#components'
+</script>
+```
+
+## Custom Directories
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  components: [
+    { path: '~/components/ui', prefix: 'Ui' },
+    { path: '~/components/forms', prefix: 'Form' },
+    '~/components', // Default, should come last
+  ],
+})
+```
+
+## Global Components
+
+Register globally (creates async chunks):
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  components: {
+    global: true,
+    dirs: ['~/components'],
+  },
+})
+```
+
+Or use `.global.vue` suffix:
+
+```
+components/
+└── Icon.global.vue  → Available globally
+```
+
+## Disabling Component Auto-imports
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  components: {
+    dirs: [], // Disable auto-imports
+  },
+})
+```
+
+## Library Authors
+
+Register components from npm package:
+
+```ts
+// my-ui-lib/nuxt.ts
+import { addComponentsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  setup() {
+    const resolver = createResolver(import.meta.url)
+
+    addComponentsDir({
+      path: resolver.resolve('./components'),
+      prefix: 'MyUi',
+    })
+  },
+})
+```
+
+<!-- 
+Source references:
+- https://nuxt.com/docs/directory-structure/app/components
+- https://nuxt.com/docs/guide/concepts/auto-imports#auto-imported-components
+-->

package/templates/skills/nuxt/references/features-components.md

@@ -0,0 +1,264 @@
+---
+name: built-in-components
+description: NuxtLink, NuxtPage, NuxtLayout, and other built-in Nuxt components
+---
+
+# Built-in Components
+
+Nuxt provides several built-in components for common functionality.
+
+## NuxtLink
+
+Optimized link component with prefetching:
+
+```vue
+<template>
+  <!-- Basic usage -->
+  <NuxtLink to="/about">About</NuxtLink>
+
+  <!-- With route object -->
+  <NuxtLink :to="{ name: 'posts-id', params: { id: 1 } }">Post 1</NuxtLink>
+
+  <!-- External link (opens in new tab) -->
+  <NuxtLink to="https://nuxt.com" external>Nuxt</NuxtLink>
+
+  <!-- Disable prefetching -->
+  <NuxtLink to="/heavy-page" :prefetch="false">Heavy Page</NuxtLink>
+
+  <!-- Replace history instead of push -->
+  <NuxtLink to="/page" replace>Replace</NuxtLink>
+
+  <!-- Custom active class -->
+  <NuxtLink
+    to="/dashboard"
+    active-class="text-primary"
+    exact-active-class="font-bold"
+  >
+    Dashboard
+  </NuxtLink>
+</template>
+```
+
+## NuxtPage
+
+Renders the current page component (used in layouts):
+
+```vue
+<!-- app/app.vue -->
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+```
+
+With page transitions:
+
+```vue
+<template>
+  <NuxtPage :transition="{ name: 'fade', mode: 'out-in' }" />
+</template>
+```
+
+Pass props to page:
+
+```vue
+<template>
+  <NuxtPage :page-key="route.fullPath" :foobar="123" />
+</template>
+```
+
+## NuxtLayout
+
+Controls layout rendering:
+
+```vue
+<!-- app/app.vue -->
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+```
+
+Dynamic layout:
+
+```vue
+<template>
+  <NuxtLayout :name="layout">
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<script setup>
+const layout = computed(() => isAdmin ? 'admin' : 'default')
+</script>
+```
+
+Layout with transitions:
+
+```vue
+<template>
+  <NuxtLayout :transition="{ name: 'slide', mode: 'out-in' }">
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+```
+
+## NuxtLoadingIndicator
+
+Progress bar for page navigation:
+
+```vue
+<!-- app/app.vue -->
+<template>
+  <NuxtLoadingIndicator
+    color="repeating-linear-gradient(to right, #00dc82 0%, #34cdfe 50%, #0047e1 100%)"
+    :height="3"
+    :duration="2000"
+    :throttle="200"
+  />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+```
+
+## NuxtErrorBoundary
+
+Catch and handle errors in child components:
+
+```vue
+<template>
+  <NuxtErrorBoundary @error="handleError">
+    <ComponentThatMightFail />
+
+    <template #error="{ error, clearError }">
+      <div class="error">
+        <p>Something went wrong: {{ error.message }}</p>
+        <button @click="clearError">Try again</button>
+      </div>
+    </template>
+  </NuxtErrorBoundary>
+</template>
+
+<script setup>
+function handleError(error) {
+  console.error('Error caught:', error)
+}
+</script>
+```
+
+## ClientOnly
+
+Render content only on client-side:
+
+```vue
+<template>
+  <ClientOnly>
+    <!-- Browser-only component -->
+    <BrowserOnlyChart :data="chartData" />
+
+    <template #fallback>
+      <p>Loading chart...</p>
+    </template>
+  </ClientOnly>
+</template>
+```
+
+## DevOnly
+
+Render content only in development:
+
+```vue
+<template>
+  <DevOnly>
+    <DebugPanel />
+  </DevOnly>
+</template>
+```
+
+## NuxtIsland
+
+Server components (experimental):
+
+```vue
+<template>
+  <NuxtIsland name="HeavyComponent" :props="{ data: complexData }" />
+</template>
+```
+
+## NuxtImg and NuxtPicture
+
+Optimized images (requires `@nuxt/image` module):
+
+```vue
+<template>
+  <!-- Basic optimized image -->
+  <NuxtImg src="/images/hero.jpg" width="800" height="600" />
+
+  <!-- Responsive with srcset -->
+  <NuxtImg
+    src="/images/hero.jpg"
+    sizes="sm:100vw md:50vw lg:400px"
+    :modifiers="{ format: 'webp' }"
+  />
+
+  <!-- Art direction with picture -->
+  <NuxtPicture
+    src="/images/hero.jpg"
+    :img-attrs="{ alt: 'Hero image' }"
+  />
+</template>
+```
+
+## Teleport
+
+Render content outside component tree:
+
+```vue
+<template>
+  <button @click="showModal = true">Open Modal</button>
+
+  <Teleport to="body">
+    <div v-if="showModal" class="modal">
+      <p>Modal content</p>
+      <button @click="showModal = false">Close</button>
+    </div>
+  </Teleport>
+</template>
+```
+
+For SSR, use `<ClientOnly>` with Teleport:
+
+```vue
+<template>
+  <ClientOnly>
+    <Teleport to="#teleports">
+      <Modal />
+    </Teleport>
+  </ClientOnly>
+</template>
+```
+
+## NuxtRouteAnnouncer
+
+Accessibility: announces page changes to screen readers:
+
+```vue
+<!-- app/app.vue -->
+<template>
+  <NuxtRouteAnnouncer />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+```
+
+<!-- 
+Source references:
+- https://nuxt.com/docs/api/components/nuxt-link
+- https://nuxt.com/docs/api/components/nuxt-page
+- https://nuxt.com/docs/api/components/nuxt-layout
+- https://nuxt.com/docs/api/components/client-only
+-->