Vue.js Project

---
applyTo: "**/*.vue"
---

# Vue.js Development Instructions (2025)

_Last updated: October 2025_

- Always use the fetch tool to look up the latest Vue documentation: https://vuejs.org
- Use Composition API with `<script setup>` as the default pattern in Vue 3
- Implement TypeScript with proper type definitions for props, emits, and composables
- Use Pinia for state management instead of Vuex
- Follow Vue's official style guide for component naming and structure
- Leverage Vue's reactivity system with ref, reactive, computed, and watch

**Core Principles:**

- Use single-file components (.vue) with clear separation of template, script, and style
- Implement composables for reusable reactive logic
- Use defineProps and defineEmits with TypeScript for type-safe components
- Follow the official Vue 3 migration guide when upgrading from Vue 2
- Use Vite as the build tool for fast development experience

**Component Design:**

- Keep templates simple and readable
- Use computed properties for derived state
- Implement proper v-model bindings for two-way data flow
- Use slots for flexible component composition

**Summary:**

> For all Vue work, always use the fetch tool to look up the latest documentation from https://vuejs.org. Use Composition API and TypeScript for modern, maintainable Vue applications.