Vue

Vue Skill

The Progressive JavaScript Framework.

Ecosystem Graph

graph LR
  vue["Vue"]
  vue -- "extended by" --> nuxt
  vue -- "alternative to" --> react
  vue -- "works well with" --> supabase

Quick Start

Vue 3 utilizes the Composition API, offering a highly logical and reactive way to structure components compared to the legacy Options API.

npm create vue@latest

Production Patterns

Composables

Vue's equivalent to React hooks. Use ref and computed inside standalone JavaScript functions to encapsulate and reuse stateful logic across multiple .vue components.

Architecture & Scaling

Reactivity System

Vue 3 uses JavaScript Proxies for reactivity. This means modifying nested properties of a reactive object works seamlessly without needing immutable state replacement (unlike React's setState).

Error Recovery

Utilize onErrorCaptured at the layout level to catch and log errors thrown by descendant components gracefully.

Security Notes

Be extremely cautious with the v-html directive. It renders raw HTML directly to the DOM and is a primary vector for XSS attacks if the input is not strictly sanitized.

Relationships

Alternatives: react

Works Well With: supabase

References

• Vue Docs

Why use this skill

Use this when your agent works with vue — structured patterns beat pasted docs and prevent common hallucinations.

AI pitfalls

• Using outdated SDK or API versions from training data
• Inventing environment variable names
• Omitting error handling and retry logic

Production checklist

• Secrets in environment variables, not source code
• Error handling and logging in place
• Rate limits and timeouts configured

Related skills

• nuxt — extended by
• react — alternative to
• supabase — works well with

Last Verified: 2026-07-02