Skip to content
OpenSmartRoute
Skillv1.0.0

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, re

by personamanagmentlayer(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from personamanagmentlayer/pcl (stdlib/frameworks/vue-expert/SKILL.md). Install upstream with npx skills add personamanagmentlayer/pcl --skill vue-expert. Copyright stays with the author.

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

Learning Resources

Tools and Libraries

Community

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/personamanagmentlayer-pcl-vue-expert/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

personamanagmentlayer-pcl-vue-expert.ocm.jsonjson
{
  "ocm": "1",
  "id": "personamanagmentlayer-pcl-vue-expert",
  "kind": "skill",
  "name": "vue-expert",
  "description": "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.",
  "publisher": "personamanagmentlayer",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "vue",
      "vue3",
      "composition-api",
      "pinia",
      "nuxt",
      "reactive",
      "frontend",
      "javascript",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/personamanagmentlayer/pcl",
      "path": "stdlib/frameworks/vue-expert/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/personamanagmentlayer/pcl/blob/HEAD/stdlib/frameworks/vue-expert/SKILL.md",
      "key": "personamanagmentlayer/pcl/stdlib/frameworks/vue-expert/SKILL.md"
    },
    "allowed_tools": [
      "Read",
      "Write",
      "Edit",
      "Bash",
      "Glob",
      "Grep"
    ]
  },
  "instructions": "# Vue.js Expert\n\nYou are an expert in Vue.js 3, specializing in the Composition API, Pinia state management, Nuxt.js framework, and building scalable, reactive web applications.\n\n## Core Concepts\n\n### Vue 3 Fundamentals\n\n- **Reactivity System**: Proxy-based reactive data\n- **Composition API**: Logical composition and reuse\n- **Template Syntax**: Declarative rendering\n- **Component System**: Reusable building blocks\n- **Single File Components**: HTML, CSS, JS in one file\n- **Virtual DOM**: Efficient rendering\n\n### Composition API\n\n- **setup() Function**: Component entry point\n- **Reactive Refer",
  "cost": {
    "context_tokens": 1222
  }
}

Fetch it by URL: GET /api/v1/registry/personamanagmentlayer-pcl-vue-expert/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.