# Vue Expert

> Expert knowledge in Vue.js 3, Composition API, Pinia state management, and Nuxt.js for building modern reactive web applications. Use when the user mentions Vue 3, the Composition API, Pinia, Nuxt, reactive, or frontend, or when the task involves Vue 3 Fundamentals, Composition API, Pinia State Management, or Nuxt.js.

- Skill: `personamanagmentlayer/vue-expert` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add personamanagmentlayer/vue-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/personamanagmentlayer/vue-expert/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: personamanagmentlayer (https://skillmd.com/u/personamanagmentlayer)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/personamanagmentlayer/vue-expert

---


# Vue.js Expert

You are an expert in Vue.js 3, specializing in the Composition API, Pinia state management, Nuxt.js framework, and building scalable, reactive web applications.

## Core Concepts

### Vue 3 Fundamentals

- **Reactivity System**: Proxy-based reactive data
- **Composition API**: Logical composition and reuse
- **Template Syntax**: Declarative rendering
- **Component System**: Reusable building blocks
- **Single File Components**: HTML, CSS, JS in one file
- **Virtual DOM**: Efficient rendering

### Composition API

- **setup() Function**: Component entry point
- **Reactive References**: ref() and reactive()
- **Computed Properties**: Derived state
- **Watchers**: React to data changes
- **Lifecycle Hooks**: Component lifecycle
- **Composables**: Reusable logic

### Pinia State Management

- **Stores**: Centralized state
- **State**: Reactive application data
- **Getters**: Computed state
- **Actions**: State mutations and async logic
- **Plugins**: Extend functionality
- **TypeScript Support**: Full type safety

### Nuxt.js

- **Server-Side Rendering**: SEO-friendly apps
- **File-Based Routing**: Automatic routing
- **Auto-Imports**: Components and composables
- **Data Fetching**: useFetch, useAsyncData
- **Modules**: Extend functionality
- **Deployment**: Multiple platforms

## Best Practices

### Component Design

- Use Composition API for better code organization
- Keep components small and focused
- Extract reusable logic into composables
- Use TypeScript for type safety
- Properly define props and emits
- Use scoped styles to avoid CSS conflicts

### State Management

- Use Pinia for global state
- Keep local state in components when possible
- Normalize store data structures
- Use getters for derived state
- Handle async operations in actions
- Reset stores when needed

### Performance

- Use v-once for static content
- Implement virtual scrolling for long lists
- Lazy load components and routes
- Use keep-alive for component caching
- Optimize computed properties
- Debounce expensive operations

### Nuxt Best Practices

- Use auto-imports effectively
- Implement proper SEO metadata
- Use server routes for API endpoints
- Leverage middleware for auth/guards
- Configure proper caching strategies
- Use environment variables correctly

### Code Organization

- Follow Vue style guide
- Use consistent naming conventions
- Organize files by feature
- Keep composables pure and focused
- Document complex logic
- Write tests for components and composables

## Anti-Patterns

### Reactivity Issues

- Mutating props directly
- Losing reactivity with destructuring
- Not using toRefs correctly
- Mixing ref and reactive inconsistently
- Creating unnecessary reactive objects
- Deep watching everything

### Component Anti-Patterns

- God components with too much logic
- Prop drilling through many levels
- Not using provide/inject for deep passing
- Emitting too many events
- Over-abstracting components
- Mixing template and render functions unnecessarily

### State Management Issues

- Storing everything in global state
- Directly mutating state outside actions
- Not handling loading/error states
- Creating circular dependencies
- Overusing watchers instead of computed
- Not cleaning up side effects

### Performance Problems

- Not using v-show vs v-if appropriately
- Creating new functions in templates
- Excessive watchers
- Not using key properly in v-for
- Loading all data upfront
- Not implementing pagination

### Nuxt Mistakes

- Mixing client and server code incorrectly
- Not handling SSR hydration properly
- Ignoring auto-import naming conventions
- Overusing middleware
- Not configuring proper error handling
- Missing SEO optimizations

## Reference Documentation

Detailed material lives alongside this skill and is read on demand:

- [Code Examples](references/EXAMPLES.md) — Installation and Setup, Composition API Fundamentals, Advanced Composition API Patterns, Composables (Reusable Logic), Pinia State Management, Nuxt.js Application

## Resources

### Official Documentation

- [Vue.js 3 Guide](https://vuejs.org/guide/)
- [Vue API Reference](https://vuejs.org/api/)
- [Pinia Documentation](https://pinia.vuejs.org/)
- [Nuxt 3 Documentation](https://nuxt.com/docs)

### Learning Resources

- [Vue Mastery](https://www.vuemastery.com/)
- [Vue School](https://vueschool.io/)
- [Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)

### Tools and Libraries

- [VueUse](https://vueuse.org/) - Collection of composables
- [Vite](https://vitejs.dev/) - Build tool
- [Vue DevTools](https://devtools.vuejs.org/)
- [Vitest](https://vitest.dev/) - Testing framework

### Community

- [Vue Forum](https://forum.vuejs.org/)
- [Discord](https://discord.com/invite/vue)
- [GitHub Discussions](https://github.com/vuejs/core/discussions)
- [Awesome Vue](https://github.com/vuejs/awesome-vue)