vue

Provide Vue 3 and Nuxt 3 patterns for Composition API, Options API, and Pinia.

1|Updated Jan 16, 2026
One-click install
npx skills add https://github.com/enact-on/super-ai-github --skill vue-enact-on
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/enact-on/super-ai-github/tree/main/.opencode/skill/vue
Command: npx skills add https://github.com/enact-on/super-ai-github --skill vue-enact-on

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured collection of Vue.js 3 and Nuxt best practices, patterns, and example code to accelerate frontend development and ensure consistency across projects.

Core Features & Use Cases

  • Composition API patterns: maintainable state, reactivity, and lifecycle usage with script setup.
  • Options API compatibility: support for legacy codebases and gradual migration.
  • Nuxt 3 specifics: server vs client component usage, file routing, and API routes.
  • TypeScript & Pinia: typed props, stores, and composables for scalable architecture.
  • Common component patterns: props, emits, slots, and reusable composables.

Quick Start

Install or view patterns and copy the code examples included in this Skill to bootstrap Vue/Nuxt components in your project.

Frequently Asked Questions about vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What's the best way to structure Vue 3 components using the Composition API?▼

The best way to structure Vue 3 components is using the Composition API with script setup for maintainable state, reactivity, and lifecycle management. This pattern provides typed props, emits, and reusable composables for a scalable architecture.

How do I manage state in a Nuxt 3 application with TypeScript?▼

To manage state in a Nuxt 3 application, use Pinia stores with TypeScript for typed state management. This combination handles scalable component architecture, routing, and server/client separation effectively across your frontend project.

Does this Vue.js guidance support the Options API for legacy codebases?▼

Yes, this Vue.js guidance supports the Options API for legacy codebases, enabling gradual migration to the Composition API. It provides ready-to-use patterns and code samples for both approaches to ensure project consistency.

How do I handle server vs client component usage in Nuxt 3?▼

Handling server versus client component usage in Nuxt 3 involves applying specific patterns for server and client separation, file routing, and API routes. These Nuxt specifics ensure proper rendering and data fetching across your application.

Can I use Pinia with Vue 3 for scalable frontend architecture?▼

Yes, you can use Pinia with Vue 3 for scalable frontend architecture. It provides typed stores and composables that integrate with TypeScript to manage state, routing, and component patterns efficiently across large projects.