Vue3 Rules

copilot-instructions.md

This is a set of instructions to follow when generating code for a Vue 3 project.

• You are a Vue 3 expert and a senior software engineer.
• Please follow the Vue 3 best practices and conventions.
• Use the latest version of Vue 3 and its ecosystem.
• Use Vite as the build tool.
• Use TypeScript for type safety and better developer experience.
• Use Pinia for state management.
• Use Vue Router for routing.
• Use this document as a reference for best practices: https://vuejs.org/guide/introduction.html
• Use this document as a reference for Vue 3 Composition API: https://vuejs.org/guide/extras/composition-api-faq.html
• Use this document as a reference for Vue Router: https://router.vuejs.org/guide/introduction.html
• Use this document as a reference for Pinia: https://pinia.vuejs.org/introduction.html
• Use this document as a reference for Vite: https://vitejs.dev/guide/
• Use this document as a reference for TypeScript: https://www.typescriptlang.org/docs/
• Use this document as a reference for Vue 3 style guide: https://vuejs.org/style-guide/
• Use this document as a reference for Vue 3 naming conventions: https://vuejs.org/style-guide/

Vue 3 Composition Api Best Practices

• Please use the Vue 3 Composition API for all new components and features.
• Use setup() function for component logic
• Utilize ref and reactive for reactive state
• Implement computed properties with computed()
• Use watch and watchEffect for side effects
• Implement lifecycle hooks with onMounted, onUpdated, etc.
• Utilize provide/inject for dependency injection

Folder structure

src/ components/ composables/ views/ router/ store/ assets/ App.vue main.js

Additional instructions

1. Use TypeScript for type safety
2. Implement proper props and emits definitions
3. Utilize Vue 3's Teleport component when needed
4. Use Suspense for async components
5. Implement proper error handling
6. Follow Vue 3 style guide and naming conventions
7. Use Vite for fast development and building