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.3 KiB

paths
paths
**/nuxt.config.*
**/server/**/*.ts
**/pages/**
**/layouts/**
**/middleware/**

Nuxt Testing

This file extends common/testing.md with Nuxt specific content.

Package: @nuxt/test-utils. Vitest-first for unit and component tests, with built-in Playwright browser E2E support. nuxt-vitest and vitest-environment-nuxt are superseded and folded into it.

Setup

  • Install dev deps: @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core.
  • Config: defineVitestConfig({ test: { environment: 'nuxt' } }) from @nuxt/test-utils/config. Use defineVitestProject for multi-project (separate unit / nuxt / e2e environments).
  • Add @nuxt/test-utils/module to nuxt.config. Per-file opt-in via // @vitest-environment nuxt.

Runtime helpers

Import from @nuxt/test-utils/runtime.

  • mountSuspended(component, opts) mounts in the Nuxt env with async setup + plugin injection (accepts @vue/test-utils mount options + route).
  • renderSuspended(component, opts) is the Testing Library variant (needs @testing-library/vue).
  • mockNuxtImport(name, factory) mocks auto-imports (e.g. useState). Once per import per file, use vi.hoisted().
  • mockComponent(name, factory) mocks by PascalCase name or path.
  • registerEndpoint(path, handler|opts) mocks a Nitro endpoint to test server routes or stub the backend. Supports method + once.

E2E helpers

Import from @nuxt/test-utils/e2e.

  • await setup({ rootDir, server, browser, ... }) inside the describe block (manages beforeAll/afterAll).
  • Then $fetch(url) (rendered HTML), fetch(url) (response object), url(path) (full URL with port), createPage(url) (Playwright).
  • Playwright integration: import expect / test from @nuxt/test-utils/playwright.

What to test how

  • Composables: mock auto-imports with mockNuxtImport, mount a host component via mountSuspended to exercise useState / useFetch in the Nuxt runtime.
  • Server routes: registerEndpoint to stub, or e2e $fetch / fetch against the real Nitro server.

Reference