Vue 3 Development

Build Vue 3 apps with the Composition API and TypeScript. Covers reactive state with ref/reactive, composables, script setup, Pinia stores, component patterns, and typed props/emits.

This skill implements Vue 3 using <script setup>, the Composition API, and TypeScript. It builds reusable composables, models state with ref/reactive and computed, wires Pinia stores, types props and emits, and structures single-file components for maintainability and performance.

When to use

Use when building a Vue 3 app, writing composables, typing props and emits, setting up Pinia state, or migrating Options API code to the Composition API with script setup.

Examples

Reusable composable

Extract stateful logic

Write a Vue 3 composable useDebouncedSearch that returns a reactive query, debounced results, and loading state, fully typed with TypeScript

Pinia store

Typed store with actions

Create a typed Pinia store for a shopping cart with add/remove/clear actions, a computed total, and localStorage persistence