aico-cli 2.1.1 → 2.1.23

package/templates/skills/vue-best-practices/rules/pinia-store-mocking.md

@@ -0,0 +1,159 @@
+---
+title: Mocking Pinia Stores with Vitest
+impact: HIGH
+impactDescription: properly mocks Pinia stores in component tests
+type: efficiency
+tags: pinia, vitest, testing, mock, createTestingPinia, store
+---
+
+# Mocking Pinia Stores with Vitest
+
+**Impact: HIGH** - properly mocks Pinia stores in component tests
+
+Developers struggle to properly mock Pinia stores: `createTestingPinia` requires explicit `createSpy` configuration, and "injection Symbol(pinia) not found" errors occur without proper setup.
+
+> **Important (@pinia/testing 1.0+):** The `createSpy` option is **REQUIRED**, not optional. Omitting it throws an error: "You must configure the `createSpy` option."
+
+## Symptoms
+
+- "injection Symbol(pinia) not found" error
+- "You must configure the `createSpy` option" error
+- Actions not properly mocked
+- Store state not reset between tests
+
+## Fix
+
+**Pattern 1: Basic setup with createTestingPinia**
+```typescript
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import { vi } from 'vitest'
+import MyComponent from './MyComponent.vue'
+import { useCounterStore } from '@/stores/counter'
+
+test('component uses store', async () => {
+  const wrapper = mount(MyComponent, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn,  // REQUIRED in @pinia/testing 1.0+
+          initialState: {
+            counter: { count: 10 }  // Set initial state
+          }
+        })
+      ]
+    }
+  })
+
+  // Get the store instance AFTER mounting
+  const store = useCounterStore()
+
+  // Actions are automatically stubbed
+  await wrapper.find('button').trigger('click')
+  expect(store.increment).toHaveBeenCalled()
+})
+```
+
+**Pattern 2: Customize action behavior**
+```typescript
+test('component handles async action', async () => {
+  const wrapper = mount(MyComponent, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn,
+          stubActions: false  // Don't stub, use real actions
+        })
+      ]
+    }
+  })
+
+  const store = useCounterStore()
+
+  // Override specific action
+  store.fetchData = vi.fn().mockResolvedValue({ items: [] })
+
+  await wrapper.find('.load-button').trigger('click')
+  expect(store.fetchData).toHaveBeenCalled()
+})
+```
+
+**Pattern 3: Testing store directly**
+```typescript
+import { setActivePinia, createPinia } from 'pinia'
+import { useCounterStore } from '@/stores/counter'
+
+describe('Counter Store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  test('increments count', () => {
+    const store = useCounterStore()
+    expect(store.count).toBe(0)
+
+    store.increment()
+    expect(store.count).toBe(1)
+  })
+})
+```
+
+## Setup Store with Vitest
+
+```typescript
+// stores/counter.ts - Setup store syntax
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
+
+// Test file
+test('setup store works', async () => {
+  const pinia = createTestingPinia({
+    createSpy: vi.fn,
+    initialState: {
+      counter: { count: 5 }
+    }
+  })
+
+  const wrapper = mount(MyComponent, {
+    global: { plugins: [pinia] }
+  })
+
+  const store = useCounterStore()
+  expect(store.count).toBe(5)
+  expect(store.doubleCount).toBe(10)
+})
+```
+
+## Reset Between Tests
+
+```typescript
+describe('Store Tests', () => {
+  let pinia: Pinia
+
+  beforeEach(() => {
+    pinia = createTestingPinia({
+      createSpy: vi.fn
+    })
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test('test 1', () => { /* ... */ })
+  test('test 2', () => { /* ... */ })
+})
+```
+
+## Reference
+
+- [Pinia Testing Guide](https://pinia.vuejs.org/cookbook/testing.html)
+- [Pinia Discussion #2092](https://github.com/vuejs/pinia/discussions/2092)

package/templates/skills/vue-best-practices/rules/script-setup-jsdoc.md

@@ -0,0 +1,85 @@
+---
+title: JSDoc Documentation for Script Setup Components
+impact: MEDIUM
+impactDescription: enables proper documentation for composition API components
+type: capability
+tags: jsdoc, script-setup, documentation, composition-api, component
+---
+
+# JSDoc Documentation for Script Setup Components
+
+**Impact: MEDIUM** - enables proper documentation for composition API components
+
+`<script setup>` doesn't have an obvious place to attach JSDoc comments for the component itself. Use a dual-script pattern.
+
+## Problem
+
+**Incorrect:**
+```vue
+<script setup lang="ts">
+/**
+ * This comment doesn't appear in IDE hover or docs
+ * @component
+ */
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+```
+
+JSDoc comments inside `<script setup>` don't attach to the component export because there's no explicit export statement.
+
+## Solution
+
+Use both `<script>` and `<script setup>` blocks:
+
+**Correct:**
+```vue
+<script lang="ts">
+/**
+ * A counter component that displays and increments a value.
+ *
+ * @example
+ * ```vue
+ * <Counter :initial="5" @update="handleUpdate" />
+ * ```
+ *
+ * @component
+ */
+export default {}
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  /** Starting value for the counter */
+  initial?: number
+}>()
+
+const emit = defineEmits<{
+  /** Emitted when counter value changes */
+  update: [value: number]
+}>()
+
+const count = ref(props.initial ?? 0)
+</script>
+```
+
+## How It Works
+
+- The regular `<script>` block's default export is merged with `<script setup>`
+- JSDoc on `export default {}` attaches to the component
+- Props and emits JSDoc in `<script setup>` still work normally
+
+## What Gets Documented
+
+| Location | Shows In |
+|----------|----------|
+| `export default {}` JSDoc | Component import hover |
+| `defineProps` JSDoc | Prop hover in templates |
+| `defineEmits` JSDoc | Event handler hover |
+
+## Reference
+
+- [Vue Language Tools Discussion #5932](https://github.com/vuejs/language-tools/discussions/5932)

package/templates/skills/vue-best-practices/rules/strict-css-modules.md

@@ -0,0 +1,68 @@
+---
+title: Enable Strict CSS Modules Type Checking
+impact: MEDIUM
+impactDescription: catches typos in CSS module class names at compile time
+type: capability
+tags: strictCssModules, vueCompilerOptions, css-modules, style-module
+---
+
+# Enable Strict CSS Modules Type Checking
+
+**Impact: MEDIUM** - catches typos in CSS module class names at compile time
+
+When using CSS modules with `<style module>`, Vue doesn't validate class names by default. Enable `strictCssModules` to catch typos and undefined classes.
+
+## Problem
+
+CSS module class name errors go undetected:
+
+```vue
+<script setup lang="ts">
+// No error for typo in class name
+</script>
+
+<template>
+  <div :class="$style.buttn">Click me</div>
+</template>
+
+<style module>
+.button {
+  background: blue;
+}
+</style>
+```
+
+The typo `buttn` instead of `button` silently fails at runtime.
+
+## Solution
+
+Enable `strictCssModules` in your tsconfig:
+
+```json
+// tsconfig.json or tsconfig.app.json
+{
+  "vueCompilerOptions": {
+    "strictCssModules": true
+  }
+}
+```
+
+Now `$style.buttn` will show a type error because `buttn` doesn't exist in the CSS module.
+
+## What Gets Checked
+
+| Access | With strictCssModules |
+|--------|----------------------|
+| `$style.validClass` | OK |
+| `$style.typo` | Error: Property 'typo' does not exist |
+| `$style['dynamic']` | OK (dynamic access not checked) |
+
+## Limitations
+
+- Only checks static property access (`$style.className`)
+- Dynamic access (`$style[variable]`) is not validated
+- Only works with `<style module>`, not external CSS files
+
+## Reference
+
+- [Vue Language Tools Wiki - Vue Compiler Options](https://github.com/vuejs/language-tools/wiki/Vue-Compiler-Options)

package/templates/skills/vue-best-practices/rules/volar-3-breaking-changes.md

@@ -0,0 +1,65 @@
+---
+title: Volar 3.0 Breaking Changes
+impact: HIGH
+impactDescription: fixes editor integration after Volar/vue-language-server upgrade
+type: capability
+tags: volar, vue-language-server, neovim, vscode, ide, ts_ls, vtsls
+---
+
+# Volar 3.0 Breaking Changes
+
+**Impact: HIGH** - fixes editor integration after Volar/vue-language-server upgrade
+
+Volar 3.0 (vue-language-server 3.x) introduced breaking changes to the language server protocol. Editors configured for Volar 2.x will break with errors like "vue_ls doesn't work with ts_ls.. it expects vtsls".
+
+## Symptoms
+
+- `vue_ls doesn't work with ts_ls`
+- TypeScript features stop working in Vue files
+- No autocomplete, type hints, or error highlighting
+- Editor shows "Language server initialization failed"
+
+## Fix by Editor
+
+### VSCode
+
+Update the "Vue - Official" extension to latest version. It manages the language server automatically.
+
+### NeoVim (nvim-lspconfig)
+
+**Option 1: Use vtsls instead of ts_ls**
+```lua
+-- Replace ts_ls/tsserver with vtsls
+require('lspconfig').vtsls.setup({})
+require('lspconfig').volar.setup({})
+```
+
+**Option 2: Downgrade vue-language-server**
+```bash
+npm install -g @vue/language-server@2.1.10
+```
+
+### JetBrains IDEs
+
+Update to latest Vue plugin. If issues persist, disable and re-enable the Vue plugin.
+
+## What Changed in 3.0
+
+| Feature | Volar 2.x | Volar 3.0 |
+|---------|-----------|-----------|
+| TypeScript integration | ts_ls/tsserver | vtsls recommended (Neovim) |
+| Hybrid mode | Optional | Default |
+
+## Workaround: Stay on 2.x
+
+If upgrading is not possible:
+```bash
+npm install -g @vue/language-server@^2.0.0
+```
+
+Pin in your project's package.json to prevent accidental upgrades.
+
+## Reference
+
+- [vuejs/language-tools#5598](https://github.com/vuejs/language-tools/issues/5598)
+- [NeoVim Vue Setup Guide](https://dev.to/danwalsh/solved-vue-3-typescript-inlay-hint-support-in-neovim-53ej)

package/templates/skills/vue-best-practices/rules/vue-directive-comments.md

@@ -0,0 +1,73 @@
+---
+title: Vue Template Directive Comments
+impact: HIGH
+impactDescription: enables fine-grained control over template type checking
+type: capability
+tags: vue-directive, vue-ignore, vue-expect-error, vue-skip, template, type-checking
+---
+
+# Vue Template Directive Comments
+
+**Impact: HIGH** - enables fine-grained control over template type checking
+
+Vue Language Tools supports special directive comments to control type checking behavior in templates.
+
+## Available Directives
+
+### @vue-ignore
+
+Suppress type errors for the next line:
+
+```vue
+<template>
+  <!-- @vue-ignore -->
+  <Component :prop="valueWithTypeError" />
+</template>
+```
+
+### @vue-expect-error
+
+Assert that the next line should have a type error (useful for testing):
+
+```vue
+<template>
+  <!-- @vue-expect-error -->
+  <Component :invalid-prop="value" />
+</template>
+```
+
+### @vue-skip
+
+Skip type checking for an entire block:
+
+```vue
+<template>
+  <!-- @vue-skip -->
+  <div>
+    <!-- Everything in here is not type-checked -->
+    <LegacyComponent :any="props" :go="here" />
+  </div>
+</template>
+```
+
+### @vue-generic
+
+Declare template-level generic types:
+
+```vue
+<template>
+  <!-- @vue-generic {T extends string} -->
+  <GenericList :items="items as T[]" />
+</template>
+```
+
+## Use Cases
+
+- Migrating legacy components with incomplete types
+- Working with third-party components that have incorrect type definitions
+- Temporarily suppressing errors during refactoring
+- Testing that certain patterns produce expected type errors
+
+## Reference
+
+- [Vue Language Tools Wiki - Directive Comments](https://github.com/vuejs/language-tools/wiki/Directive-Comments)

package/templates/skills/vue-best-practices/rules/vue-router-typed-params.md

@@ -0,0 +1,81 @@
+---
+title: Vue Router useRoute Params Union Type Narrowing
+impact: MEDIUM
+impactDescription: fixes "Property does not exist" errors with typed route params
+type: capability
+tags: vue-router, useRoute, unplugin-vue-router, typed-routes, params
+---
+
+# Vue Router useRoute Params Union Type Narrowing
+
+**Impact: MEDIUM** - fixes "Property does not exist" errors with typed route params
+
+With `unplugin-vue-router` typed routes, `route.params` becomes a union of ALL page param types. TypeScript cannot narrow `Record<never, never> | { id: string }` properly, causing "Property 'id' does not exist" errors even on the correct page.
+
+## Symptoms
+
+- "Property 'id' does not exist on type 'RouteParams'"
+- `route.params.id` shows as `string | undefined` everywhere
+- Union type of all route params instead of specific route
+- Type narrowing with `if (route.name === 'users-id')` doesn't work
+
+## Root Cause
+
+`unplugin-vue-router` generates a union type of all possible route params. TypeScript's control flow analysis can't narrow this union based on route name checks.
+
+## Fix
+
+**Option 1: Pass route name to useRoute (recommended)**
+```typescript
+// pages/users/[id].vue
+import { useRoute } from 'vue-router/auto'
+
+// Specify the route path for proper typing
+const route = useRoute('/users/[id]')
+
+// Now properly typed as { id: string }
+console.log(route.params.id)  // string, not string | undefined
+```
+
+**Option 2: Type assertion with specific route**
+```typescript
+import { useRoute } from 'vue-router'
+import type { RouteLocationNormalized } from 'vue-router/auto-routes'
+
+const route = useRoute() as RouteLocationNormalized<'/users/[id]'>
+route.params.id  // Properly typed
+```
+
+**Option 3: Define route-specific param type**
+```typescript
+// In your page component
+interface UserRouteParams {
+  id: string
+}
+
+const route = useRoute()
+const { id } = route.params as UserRouteParams
+```
+
+## Required tsconfig Setting
+
+Ensure `moduleResolution: "bundler"` for unplugin-vue-router:
+```json
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}
+```
+
+## Caveat: Route Name Format
+
+The route name matches the file path pattern:
+- `pages/users/[id].vue` → `/users/[id]`
+- `pages/posts/[slug]/comments.vue` → `/posts/[slug]/comments`
+
+## Reference
+
+- [unplugin-vue-router#337](https://github.com/posva/unplugin-vue-router/issues/337)
+- [unplugin-vue-router#176](https://github.com/posva/unplugin-vue-router/discussions/176)
+- [unplugin-vue-router TypeScript docs](https://uvr.esm.is/guide/typescript.html)

package/templates/skills/vue-best-practices/rules/vue-tsc-strict-templates.md

@@ -0,0 +1,69 @@
+---
+title: Enable Strict Template Checking
+impact: HIGH
+impactDescription: catches undefined components and props at compile time
+type: capability
+tags: vue-tsc, typescript, type-checking, templates, vueCompilerOptions
+---
+
+# Enable Strict Template Checking
+
+**Impact: HIGH** - catches undefined components and props at compile time
+
+By default, vue-tsc does not report errors for undefined components in templates. Enable `strictTemplates` to catch these issues during type checking.
+
+## Which tsconfig?
+
+Add `vueCompilerOptions` to the tsconfig that includes Vue source files. In projects with multiple tsconfigs (like those created with `create-vue`), this is typically `tsconfig.app.json`, not the root `tsconfig.json` or `tsconfig.node.json`.
+
+**Incorrect (missing strict checking):**
+
+```json
+{
+  "compilerOptions": {
+    "strict": true
+  }
+  // vueCompilerOptions not configured - undefined components won't error
+}
+```
+
+**Correct (strict template checking enabled):**
+
+```json
+{
+  "compilerOptions": {
+    "strict": true
+  },
+  "vueCompilerOptions": {
+    "strictTemplates": true
+  }
+}
+```
+
+## Available Options
+
+| Option | Default | Effect |
+|--------|---------|--------|
+| `strictTemplates` | `false` | Enables all checkUnknown* options below |
+| `checkUnknownComponents` | `false` | Error on undefined/unregistered components |
+| `checkUnknownProps` | `false` | Error on props not declared in component definition |
+| `checkUnknownEvents` | `false` | Error on events not declared via `defineEmits` |
+| `checkUnknownDirectives` | `false` | Error on unregistered custom directives |
+
+## Granular Control
+
+If `strictTemplates` is too strict, enable individual checks:
+
+```json
+{
+  "vueCompilerOptions": {
+    "checkUnknownComponents": true,
+    "checkUnknownProps": false
+  }
+}
+```
+
+## Reference
+
+- [Vue Compiler Options](https://github.com/vuejs/language-tools/wiki/Vue-Compiler-Options)
+- [Vite Vue+TS Template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vue-ts)

package/templates/skills/vue-best-practices/rules/with-defaults-union-types.md

@@ -0,0 +1,102 @@
+---
+title: withDefaults Incorrect Default with Union Types
+impact: MEDIUM
+impactDescription: fixes spurious "Missing required prop" warning with union type props
+type: capability
+tags: withDefaults, defineProps, union-types, defaults, vue-3.5
+---
+
+# withDefaults Incorrect Default with Union Types
+
+**Impact: MEDIUM** - fixes spurious "Missing required prop" warning with union type props
+
+Using `withDefaults` with union types like `false | string` may produce a Vue runtime warning "Missing required prop" even when a default is provided. The runtime value IS applied correctly, but the warning can be confusing.
+
+## Symptoms
+
+- Vue warns "Missing required prop" despite default being set
+- Warning appears only with union types like `false | string`
+- TypeScript types are correct
+- Runtime value IS correct (the default is applied)
+
+## Problematic Pattern
+
+```typescript
+// This produces a spurious warning (but works at runtime)
+interface Props {
+  value: false | string  // Union type
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 'default'  // Runtime value IS correct, but Vue warns about missing prop
+})
+```
+
+## Fix
+
+**Option 1: Use Reactive Props Destructure (Vue 3.5+)**
+```vue
+<script setup lang="ts">
+interface Props {
+  value: false | string
+}
+
+// Preferred in Vue 3.5+
+const { value = 'default' } = defineProps<Props>()
+</script>
+```
+
+**Option 2: Use runtime declaration**
+```vue
+<script setup lang="ts">
+const props = defineProps({
+  value: {
+    type: [Boolean, String] as PropType<false | string>,
+    default: 'default'
+  }
+})
+</script>
+```
+
+**Option 3: Split into separate props**
+```typescript
+interface Props {
+  enabled: boolean
+  customValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  enabled: false,
+  customValue: 'default'
+})
+```
+
+## Why Reactive Props Destructure Works
+
+Vue 3.5's Reactive Props Destructure handles default values at the destructuring level, bypassing the type inference issues with `withDefaults`.
+
+```typescript
+// The default is applied during destructuring, not type inference
+const { prop = 'default' } = defineProps<{ prop?: string }>()
+```
+
+## Enable Reactive Props Destructure
+
+This is enabled by default in Vue 3.5+. For older versions:
+```javascript
+// vite.config.js
+export default {
+  plugins: [
+    vue({
+      script: {
+        propsDestructure: true
+      }
+    })
+  ]
+}
+```
+
+## Reference
+
+- [vuejs/core#12897](https://github.com/vuejs/core/issues/12897)
+- [Reactive Props Destructure RFC](https://github.com/vuejs/rfcs/discussions/502)