vue

Guide Vue 3 component development with Composition API patterns and testing practices.

Updated Jun 22, 2024
One-click install
npx skills add https://github.com/Dyrean/dotfiles --skill vue-dyrean
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/Dyrean/dotfiles/tree/main/opencode/.config/opencode/skills/vue
Command: npx skills add https://github.com/Dyrean/dotfiles --skill vue-dyrean

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enables developers to apply Vue 3 Composition API patterns, structure components effectively, and follow testing practices to build robust Vue apps.

Core Features & Use Cases

  • Composition API patterns: guidance for script setup, props, emits, and defineProps/defineEmits usage across components.
  • VueUse integration: reusable state and utilities like useLocalStorage, useMouse, and other patterns for real-world apps.
  • Testing guidance: recommended approaches with Vitest and Vue Test Utils for components and composables.
  • Use Case: Build a dashboard with reusable components and composables that share logic and state across pages.

Quick Start

Create a minimal Vue 3 component using script setup and a small composable to demonstrate Composition API patterns and VueUse usage.

Frequently Asked Questions about vue

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

FAQPage Schema
How do I structure Vue 3 components using the Composition API and script setup?

Structure Vue 3 components by using script setup alongside defineProps and defineEmits to manage component inputs and outputs, applying Composition API patterns to build robust and maintainable UI architectures.

How do I create composables in Vue 3 to share logic across pages?

Create composables in Vue 3 to extract and share reusable state and logic across pages, integrating VueUse patterns like useLocalStorage and useMouse to handle real-world application utilities efficiently.

What is the best way to test Vue 3 components and composables?

The best way to test Vue 3 components and composables is using Vitest combined with Vue Test Utils, applying recommended testing practices to verify component behavior, props, emits, and shared logic functionality.

Does VueUse work with Vue 3 Composition API patterns for state management?

VueUse works seamlessly with Vue 3 Composition API patterns, providing reusable state and utility functions like useLocalStorage and useMouse that integrate directly into composables for real-world UI development.

Can I build a Vue 3 dashboard with reusable components and shared state?

You can build a Vue 3 dashboard by creating reusable components and composables that share logic and state across pages, leveraging Composition API patterns and VueUse utilities for robust UI development.