mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-06-16 16:36:53 +08:00

z3tz3r0 5108b20954

feat(rules): add vue and nuxt rule sets (#2250 )

* 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).

2026-06-15 14:01:38 -04:00

2.4 KiB

Raw Permalink Blame History

paths

**/*.vue

Vue Patterns

This file extends 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.

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

2.4 KiB Raw Permalink Blame History