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 — 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
• Vue API Reference
• Pinia Documentation
• Nuxt 3 Documentation

Learning Resources

• Vue Mastery
• Vue School
• Composition API FAQ

Tools and Libraries

• VueUse - Collection of composables
• Vite - Build tool
• Vue DevTools
• Vitest - Testing framework

Community

• Vue Forum
• Discord
• GitHub Discussions
• Awesome Vue