mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-16 16:36:53 +08:00
5108b20954
* feat(rules): add vue and nuxt rule sets Add rules/vue/ and rules/nuxt/, each with the standard 5-file layout (coding-style, hooks, patterns, security, testing) that extends common/, following the Adding a New Language convention in rules/README.md. Vue rules reference the frontend-patterns and vite-patterns skills. Nuxt rules reference the nuxt4-patterns and vite-patterns skills. Content is concise (1.5 to 4 KB per file) since rules load as always-on context. * fix(rules): address PR review on vue and nuxt rule sets - nuxt/coding-style: generalize the srcDir-override note (drop project-specific 'this repo' phrasing so it is correct for any Nuxt project). - vue/hooks: add **/*.ts and **/*.tsx to paths so the lint/typecheck guidance loads when editing composables and stores. - nuxt/hooks: add **/*.vue to paths (covers pages/layouts/components) and wrap nuxi typecheck in a timeout, mirroring web/hooks.md. - nuxt/security: tighten the /security-review auto-trigger scope to external fetch, credential handling, and sensitive mutations, with examples. - nuxt/testing: correct 'Vitest-only' to note built-in Playwright E2E, and drop the @nuxt/test-utils version pin. - README: register vue and nuxt in the structure tree and install examples. Skipped: 'X specific' -> 'X-specific' hyphenation (all existing rule sets use the unhyphenated form, changing only vue/nuxt would be inconsistent); repeating the 80%/TDD mandate in nuxt/testing (already inherited from common/testing.md).
57 lines
2.4 KiB
Markdown
57 lines
2.4 KiB
Markdown
---
|
|
paths:
|
|
- "**/*.vue"
|
|
---
|
|
|
|
# Vue Patterns
|
|
|
|
> This file extends [common/patterns.md](../common/patterns.md) with Vue specific content.
|
|
|
|
## Composables
|
|
|
|
- The composable (`useXxx`) is the reusable-logic unit. In Feature-Sliced Design it lives in the slice `model` segment.
|
|
- Accept `MaybeRefOrGetter<T>` inputs and normalize with `toValue`, so callers can pass a ref, a getter, or a raw value.
|
|
- Return `toRefs(reactive(...))` so consumers can destructure without losing reactivity.
|
|
- A composable that uses lifecycle hooks or `provide` / `inject` must be called inside a component `setup`, not lazily or conditionally.
|
|
|
|
## Props, Emits, v-model
|
|
|
|
- Type-based `defineProps<Props>()` and tuple-form `defineEmits<{ change: [id: number] }>()`.
|
|
- `defineModel<T>('name', { default })` for two-way binding. It compiles to a prop plus an `update:*` emit.
|
|
|
|
## Provide / Inject
|
|
|
|
- Use `provide` / `inject` for tree-scoped data without prop drilling.
|
|
- Type-safe collision-free keys: `const key = Symbol() as InjectionKey<T>`.
|
|
- The provider owns mutations. Expose a `readonly` ref plus an explicit updater function, never a raw mutable ref.
|
|
|
|
## Pinia (FSD model segment)
|
|
|
|
- Prefer setup stores: `ref` is state, `computed` is getters, `function` is actions.
|
|
- Setup stores do not get `$reset` for free. Define your own.
|
|
- Use `storeToRefs` for state and getters. Destructure actions directly off the store.
|
|
- Never persist raw auth tokens to `localStorage`.
|
|
|
|
## vue-router
|
|
|
|
- Lazy-load route components with dynamic `import()`.
|
|
- A global `beforeEach` auth gate keyed on `meta.requiresAuth`. Guards return `false` (cancel), a route location (redirect), or `undefined` / `true` (continue).
|
|
- Watch `() => route.params.id`, not the whole `route` object.
|
|
|
|
## vue-query (server cache)
|
|
|
|
- `@tanstack/vue-query` owns server-cache state. Pinia owns client state.
|
|
- Put request functions plus `queryOptions` factories in the FSD `api` segment.
|
|
- Critical: put the ref or computed ITSELF in the query key, never `.value`. Passing `.value` freezes the key and kills reactive refetch.
|
|
|
|
```ts
|
|
useQuery({ queryKey: ['auction', id], queryFn: () => fetchAuction(toValue(id)) })
|
|
// after a mutation
|
|
queryClient.invalidateQueries({ queryKey: ['auction', id] })
|
|
```
|
|
|
|
## Reference
|
|
|
|
- ECC skills: `frontend-patterns`, `vite-patterns`.
|
|
- Docs: https://pinia.vuejs.org/ · https://router.vuejs.org/ · https://tanstack.com/query/latest/docs/framework/vue/overview · https://vuejs.org/guide/reusability/composables.html
|