mcpField
V
vue

vue

github.com/nuxt-contentDevelopment74048 installsUpdated 1w ago
Repository

About vue

A Vue 3 development reference skill for developers building components, composables, client utilities, and tests. It organizes focused guidance into separate files to limit irrelevant context.

Key features

  1. 01Vue component patterns
  2. 02Composable and reactivity guidance
  3. 03Client utility practices
  4. 04Component and composable testing
  5. 05TypeScript and router guidance

Use cases

  1. 01Writing a Vue component
  2. 02Creating a composable
  3. 03Testing Vue code

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nuxt-content/nuxt-studio --skill vue

After installing, type/vuein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
components.md
composables.md
router.md
testing.md
typescript.md
utils-client.md

Details

From the project README

Vue 3 Development

Reference for Vue 3 Composition API patterns, component architecture, and testing practices.

Current stable: Vue 3.5+ with enhanced reactivity performance (-56% memory, 10x faster array tracking), new SSR features, and improved developer experience.

Overview

Progressive reference system for Vue 3 projects. Load only files relevant to current task to minimize context usage (~250 tokens base, 500-1500 per sub-file).

When to Use

Use this skill when:

  • Writing .vue components
  • Creating composables (use* functions)
  • Building client-side utilities
  • Testing Vue components/composables

Use nuxt skill instead for:

  • Server routes, API endpoints
  • File-based routing, middleware
  • Nuxt-specific patterns

For styled UI components: use nuxt-ui skill For headless accessible components: use reka-ui skill For VueUse composables: use vueuse skill

Quick Reference

Working on...Load file
.vue in components/references/components.md
File in composables/references/composables.md
File in utils/references/utils-client.md
.spec.ts or .test.tsreferences/testing.md
TypeScript patternsreferences/typescript.md
Vue Router typingreferences/router.md

Loading Files

Load one file at a time based on file context:

DO NOT load all files at once - wastes context on irrelevant patterns.

Available Guidance

references/components.md - Props with reactive destructuring, emits patterns, defineModel for v-model, slots shorthand

references/composables.md - Composition API structure, VueUse integration, lifecycle hooks, async patterns, reactivity gotchas

references/utils-client.md - Pure functions, formatters, validators, transformers, when NOT to use utils

references/testing.md - Vitest + @vue/test-utils, component testing, composable testing, router mocking

references/typescript.md - InjectionKey for provide/inject, vue-tsc strict templates, tsconfig settings, generic components

references/router.md - Route meta types, typed params with unplugin-vue-router, scroll behavior, navigation guards

Examples

Working examples in resources/examples/:

  • component-example.vue - Full component with all patterns
  • composable-example.ts - Reusable composition function

Comments

Markdown supported