vue

Provide Vue 3 and TypeScript patterns for components, Pinia, composables, and VeeValidate.

1|Updated Aug 10, 2025
One-click install
npx skills add https://github.com/michsindlinger/agent-os-extended --skill vue-michsindlinger
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/michsindlinger/agent-os-extended/tree/main/agent-os/templates/skills/frontend/vue
Command: npx skills add https://github.com/michsindlinger/agent-os-extended --skill vue-michsindlinger

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides best practices and patterns for building efficient, maintainable, and scalable Vue.js frontend applications, reducing boilerplate and common errors.

Core Features & Use Cases

  • Component Best Practices: Guidance on using <script setup>, props, emits, and slots effectively.
  • State Management: Recommendations for Pinia and composables for local state.
  • API Integration: Patterns for fetching and managing data using composables and Pinia stores.
  • Form Handling: Integration with VeeValidate for robust form validation.
  • Use Case: When developing a new Vue component, consult this Skill for the recommended structure, prop definitions, and state management approach.

Quick Start

Use the vue skill to generate a new Vue component following best practices.

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 TypeScript?

The best way to structure Vue 3 components is by utilizing the `<script setup>` syntax with TypeScript for defining props, emits, and slots effectively. This approach reduces boilerplate and ensures maintainable component architecture.

How do I manage state in a Vue.js single-page application?

Manage state in a Vue.js single-page application using Pinia for global stores and composables for local state. This combination ensures efficient data handling and scalable frontend architecture.

How do I fetch and manage API data in Vue 3?

Fetch and manage API data in Vue 3 by utilizing composables and Pinia stores. This pattern provides reusable logic for data fetching and efficient state management across your application.

Does this Vue.js skill work with VeeValidate for form validation?

Yes, this Vue.js skill integrates with VeeValidate to provide robust form handling and validation. It offers specific patterns to streamline data validation within your Vue 3 components.

When should I use composables instead of Pinia for state management?

Use composables for reusable local state logic within specific components, and use Pinia for managing global state across your Vue.js frontend application. This distinction ensures scalable and efficient data handling.