Vue Testing Best Practices Skill (vuejs-ai) for Claude

Makes Claude write and fix Vue 3 tests with Vitest, Vue Test Utils and Playwright, for Vue developers whose tests are flaky or brittle.

Installs: 14.3K; on skills.sh
Stars: 3.2K; on GitHub
Files: 11; besides SKILL.md
Updated: Oct 2026; last repo commit

vue-testing-best-practices is an index of 11 short guides for testing Vue 3 apps. Each line matches a symptom, such as flaky async tests or "injection Symbol(pinia) not found", to a guide with the fix. Claude opens the guide that fits your problem and follows it.

It triggers on Vue testing work with Vitest, Vue Test Utils, mocking and Playwright end-to-end tests. It bundles no scripts. The guides include setup commands such as npm install and npm init playwright, which Claude may run if you let it. The README calls the repo an early experiment.

Good for

Vue 3 developers setting up Vitest and Vue Test Utils
Teams whose component tests break on every refactor
Developers fighting async, Pinia, Suspense or Teleport test errors

Install vue-testing-best-practices

Claude Code

Copy this prompt.

Install the vue-testing-best-practices skill in Claude Code. Run this command:

/plugin marketplace add vuejs-ai/skills
/plugin install vue-testing-best-practices@vue-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The README shows /plugin install <skill>@vue-skills for individual skills, so this command is that pattern with this skill's name. The README also offers /plugin install vue-skills-bundle@vue-skills for all Vue skills at once. Pick one route, not both. The README suggests starting prompts with "use vue skill" for more reliable triggering.

Built from the package data we hold. Not yet tested by us. Source.

What's in the skill

When it loads

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

Sections in SKILL.md

Testing
Reference

Key facts

Author: vuejs-ai (github.com/vuejs-ai)
Repository: vuejs-ai/skills
Installs on skills.sh: 14,305 as of 2026-11-02
GitHub stars: 3,229 for the whole vuejs-ai/skills repo
License: MIT (SKILL.md frontmatter)
Last repo commit: 2026-10-23
What is inside: 12 files including SKILL.md: SKILL.md and 11 reference guides. It bundles no scripts.
Part of: vuejs-ai/skills, a repo of 8 Vue skills the README calls an early experiment
Skill name: vue-testing-best-practices (folder skills/vue-testing-best-practices)

What it includes

Vitest as the test runner for Vue 3 projects
The guide says Vitest is made by Vue and Vite team members and shares Vite config, which avoids extra setup that Jest needs in Vite projects.
Try: “Set up Vitest and Vue Test Utils for this Vue 3 project and write a first component test.”
Read · Set up Vitest
Test behavior, not internals, so refactors do not break tests
For tests that keep breaking when component internals change.
Read · Blackbox component tests
nextTick and flushPromises for race conditions
Vue updates the DOM asynchronously, so tests must wait before asserting.
Read · Async updates
flushPromises for defineAsyncComponent
For components created with defineAsyncComponent that fail to render in a test.
Read · Async components
Wrap components with async setup in Suspense
Without a Suspense wrapper, a component with async setup never renders in the test.
Read · Suspense
Test lifecycle and inject composables via a host component
Composables that use onMounted or inject need a component context.
Read · Composables
createTestingPinia and setActivePinia
Fixes the "injection Symbol(pinia) not found" error.
Read · Pinia
Snapshots alone do not prove a component works
Pair snapshots with behavior checks.
Read · No snapshot-only tests
Find teleported modal content outside the wrapper
wrapper.find() cannot see content that is teleported out of the component.
Read · Teleport
Use a browser runner for computed styles and real events
The guide shows npm install -D @vitest/browser playwright for tests that need real CSS or native events.
Runs code · Browser vs Node runners
Playwright is recommended for E2E tests
Shows npm init playwright@latest, a webServer config that runs npm run dev, and npx playwright test commands.
Runs code · End-to-end with Playwright

From the official docs

Permissions

Low risk

The skill is Markdown only, but its guides show npm install and Playwright commands that Claude may run in your project.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Guides install packages and start your dev server
The Playwright and browser-runner guides run npm install, npm init and your dev server. Review the command before you approve it and commit your work first. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode is described. The skill bundles SKILL.md and 11 reference guides and no scripts.
Talks to	npm install and npm init playwright download packages from the npm registry
Sign-in and keys	No account or key is mentioned in SKILL.md.
Data retention	The skill does not describe any storage.
Scopes	Claude writes and edits test files in your project Guides show npm install -D @vitest/browser playwright, npm init playwright@latest and npx playwright test A Playwright config example starts your app with npm run dev The Vitest guide shows npm install -D @testing-library/vue @testing-library/jest-dom

Questions

What does the vue-testing-best-practices skill do?

It gives Claude 11 short guides for Vue 3 testing, matched to problems like flaky async tests, Pinia errors, Suspense and Teleport. Claude picks the guide that fits and follows it when writing or fixing tests.

How do I install it?

Use the install box at the top of this page. The Claude Code plugin route installs just this skill. The skills CLI also works. Name the skill vue-testing-best-practices, not the longer listing name.

Which test tools does it recommend?

Vitest with Vue Test Utils for component tests, and Playwright for end-to-end tests. For checks that need real CSS or browser events it suggests a browser-based runner.

Does it work with Jest?

The guides are written around Vitest. The Vitest guide says Jest needs more setup in a Vite project, so the skill steers you to Vitest.

How do I make sure Claude uses it?

The README says to start your prompt with "use vue skill" for the most reliable triggering. Without it, triggering depends on how closely your prompt matches the skill description.

Is it safe?

The skill is Markdown and bundles no scripts. Its guides contain install and test commands, such as npm install and npx playwright test, which run only if Claude runs them in your shell. See the safety section on this page.

Information

updated Nov 2, 2026

Repository: vuejs-ai/skills
Folder: skills/vue-testing-best-practices

vuejs-ai/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 8

Using skills in Claude · support.claude.com
vuejs-ai/skills README · github.com
vuejs-ai/skills marketplace.json · github.com
skills CLI commands · github.com
vuejs-ai-vue-testing-best-practices SKILL.md · github.com
testing-e2e-playwright-recommended.md · github.com
testing-browser-vs-node-runners.md · github.com
testing-vitest-recommended-for-vue.md · github.com