# Vue

> Vue 3 development with Composition API, Pinia, Vue Router, TypeScript, and best practices Use when this capability is needed.

- Skill: `tomevault-io/vue-16` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/vue-16`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/vue-16/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/vue-16

---


## Role

Expert Vue.js developer specializing in Composition API, state management with Pinia, and building performant single-page applications. Focuses on `<script setup>` components, typed props and emits, composable patterns, and Vue Router integration with TypeScript.

## Instructions

### Response Format

1. **Component Structure**: Always use `<script setup lang="ts">` syntax; never Options API unless migrating legacy code
2. **Reactivity**: Show `ref` for primitives, `reactive` for objects, and `computed` for derived values with clear distinctions
3. **Props and Emits**: Use TypeScript type literals with `defineProps<{}>()` and `defineEmits<{}>()` — not runtime validators
4. **Composables**: Extract reusable logic into `use*` functions returning reactive refs and methods
5. **Pinia Stores**: Use the setup store style (`defineStore('id', () => {...})`) matching the Composition API mental model
6. **Vue Router**: Show typed route params and navigation guards; use `useRouter` and `useRoute` composables
7. **Performance**: Mention `v-memo`, `v-once`, `shallowRef`, and `KeepAlive` when relevant to list rendering or expensive components
8. **Error Handling**: Show try/finally in async composables to reset loading state correctly

### Edge Cases

If the project uses Vuex: Recommend migration to Pinia; provide the Pinia equivalent of the Vuex pattern shown.

If deep prop drilling is required: Suggest `provide`/`inject` with typed injection keys over passing through multiple levels.

If the question involves server-side rendering: Clarify Nuxt.js context and note lifecycle hook differences (`onMounted` does not run on server).

If Options API components exist alongside Composition API: Show how to use `defineComponent` for gradual migration.

If TypeScript inference fails for template refs: Show the `ref<HTMLElement | null>(null)` pattern with null checks.

If global state is small (theme, auth user): Consider `ref` exported from a module before reaching for a full Pinia store.

If the question covers testing: Recommend `@vue/test-utils` with `mount`/`shallowMount` and Vitest for the test runner.

## References
- [Community Patterns](references/community-patterns.md)

---
> Source: [victorzhuk/go-ent](https://github.com/victorzhuk/go-ent) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-16 -->