From 310a73f5cc72bb8b5f5364888cef42d56ff00aa7 Mon Sep 17 00:00:00 2001
From: Louella Creemers <46204894+LouellaCreemers@users.noreply.github.com>
Date: Mon, 14 Jul 2025 00:26:42 +0200
Subject: [PATCH] Add VueJs 3 instructions (#94)

* Add VueJs 3 instructions

* Fixing readme

---------

Co-authored-by: Aaron Powell <me@aaron-powell.com>
---
 README.md                           |   1 +
 instructions/vuejs3.instructions.md | 153 ++++++++++++++++++++++++++++
 2 files changed, 154 insertions(+)
 create mode 100644 instructions/vuejs3.instructions.md

diff --git a/README.md b/README.md
index 5ce1a99..060cb09 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for
 | [SQL Development](instructions/sql-sp-generation.instructions.md) | Guidelines for generating SQL statements and stored procedures | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsql-sp-generation.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsql-sp-generation.instructions.md) |
 | [Taming Copilot](instructions/taming-copilot.instructions.md) | Prevent Copilot from wreaking havoc across your codebase, keeping it under control. | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftaming-copilot.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftaming-copilot.instructions.md) |
 | [TanStack Start with Shadcn/ui Development Guide](instructions/tanstack-start-shadcn-tailwind.instructions.md) | Guidelines for building TanStack Start applications | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftanstack-start-shadcn-tailwind.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftanstack-start-shadcn-tailwind.instructions.md) |
+| [VueJS 3 Development Instructions](instructions/vuejs3.instructions.md) | VueJS 3 development standards and best practices with Composition API and TypeScript | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fvuejs3.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fvuejs3.instructions.md) |
 
 > 💡 **Usage**: Copy these instructions to your `.github/copilot-instructions.md` file or create task-specific `.github/.instructions.md` files in your workspace's `.github/instructions` folder.
 
diff --git a/instructions/vuejs3.instructions.md b/instructions/vuejs3.instructions.md
new file mode 100644
index 0000000..7c3f74f
--- /dev/null
+++ b/instructions/vuejs3.instructions.md
@@ -0,0 +1,153 @@
+---
+description: 'VueJS 3 development standards and best practices with Composition API and TypeScript'
+applyTo: '**/*.vue, **/*.ts, **/*.js, **/*.scss'
+---
+
+# VueJS 3 Development Instructions
+
+Instructions for building high-quality VueJS 3 applications with the Composition API, TypeScript, and modern best practices.
+
+## Project Context
+- Vue 3.x with Composition API as default
+- TypeScript for type safety
+- Single File Components (`.vue`) with `<script setup>` syntax
+- Modern build tooling (Vite recommended)
+- Pinia for application state management
+- Official Vue style guide and best practices
+
+## Development Standards
+
+### Architecture
+- Favor the Composition API (`setup` functions and composables) over the Options API
+- Organize components and composables by feature or domain for scalability
+- Separate UI-focused components (presentational) from logic-focused components (containers)
+- Extract reusable logic into composable functions in a `composables/` directory
+- Structure store modules (Pinia) by domain, with clearly defined actions, state, and getters
+
+### TypeScript Integration
+- Enable `strict` mode in `tsconfig.json` for maximum type safety
+- Use `defineComponent` or `<script setup lang="ts">` with `defineProps` and `defineEmits`
+- Leverage `PropType<T>` for typed props and default values
+- Use interfaces or type aliases for complex prop and state shapes
+- Define types for event handlers, refs, and `useRoute`/`useRouter` hooks
+- Implement generic components and composables where applicable
+
+### Component Design
+- Adhere to the single responsibility principle for components
+- Use PascalCase for component names and kebab-case for file names
+- Keep components small and focused on one concern
+- Use `<script setup>` syntax for brevity and performance
+- Validate props with TypeScript; use runtime checks only when necessary
+- Favor slots and scoped slots for flexible composition
+
+### State Management
+- Use Pinia for global state: define stores with `defineStore`
+- For simple local state, use `ref` and `reactive` within `setup`
+- Use `computed` for derived state
+- Keep state normalized for complex structures
+- Use actions in Pinia stores for asynchronous logic
+- Leverage store plugins for persistence or debugging
+
+### Composition API Patterns
+- Create reusable composables for shared logic, e.g., `useFetch`, `useAuth`
+- Use `watch` and `watchEffect` with precise dependency lists
+- Cleanup side effects in `onUnmounted` or `watch` cleanup callbacks
+- Use `provide`/`inject` sparingly for deep dependency injection
+- Use `useAsyncData` or third-party data utilities (Vue Query)
+
+### Styling
+- Use `<style scoped>` for component-level styles or CSS Modules
+- Consider utility-first frameworks (Tailwind CSS) for rapid styling
+- Follow BEM or functional CSS conventions for class naming
+- Leverage CSS custom properties for theming and design tokens
+- Implement mobile-first, responsive design with CSS Grid and Flexbox
+- Ensure styles are accessible (contrast, focus states)
+
+### Performance Optimization
+- Lazy-load components with dynamic imports and `defineAsyncComponent`
+- Use `<Suspense>` for async component loading fallbacks
+- Apply `v-once` and `v-memo` for static or infrequently changing elements
+- Profile with Vue DevTools Performance tab
+- Avoid unnecessary watchers; prefer `computed` where possible
+- Tree-shake unused code and leverage Vite’s optimization features
+
+### Data Fetching
+- Use composables like `useFetch` (Nuxt) or libraries like Vue Query
+- Handle loading, error, and success states explicitly
+- Cancel stale requests on component unmount or param change
+- Implement optimistic updates with rollbacks on failure
+- Cache responses and use background revalidation
+
+### Error Handling
+- Use global error handler (`app.config.errorHandler`) for uncaught errors
+- Wrap risky logic in `try/catch`; provide user-friendly messages
+- Use `errorCaptured` hook in components for local boundaries
+- Display fallback UI or error alerts gracefully
+- Log errors to external services (Sentry, LogRocket)
+
+### Forms and Validation
+- Use libraries like VeeValidate or @vueuse/form for declarative validation
+- Build forms with controlled `v-model` bindings
+- Validate on blur or input with debouncing for performance
+- Handle file uploads and complex multi-step forms in composables
+- Ensure accessible labeling, error announcements, and focus management
+
+### Routing
+- Use Vue Router 4 with `createRouter` and `createWebHistory`
+- Implement nested routes and route-level code splitting
+- Protect routes with navigation guards (`beforeEnter`, `beforeEach`)
+- Use `useRoute` and `useRouter` in `setup` for programmatic navigation
+- Manage query params and dynamic segments properly
+- Implement breadcrumb data via route meta fields
+
+### Testing
+- Write unit tests with Vue Test Utils and Jest
+- Focus on behavior, not implementation details
+- Use `mount` and `shallowMount` for component isolation
+- Mock global plugins (router, Pinia) as needed
+- Add end-to-end tests with Cypress or Playwright
+- Test accessibility using axe-core integration
+
+### Security
+- Avoid using `v-html`; sanitize any HTML inputs rigorously
+- Use CSP headers to mitigate XSS and injection attacks
+- Validate and escape data in templates and directives
+- Use HTTPS for all API requests
+- Store sensitive tokens in HTTP-only cookies, not `localStorage`
+
+### Accessibility
+- Use semantic HTML elements and ARIA attributes
+- Manage focus for modals and dynamic content
+- Provide keyboard navigation for interactive components
+- Add meaningful `alt` text for images and icons
+- Ensure color contrast meets WCAG AA standards
+
+## Implementation Process
+1. Plan component and composable architecture
+2. Initialize Vite project with Vue 3 and TypeScript
+3. Define Pinia stores and composables
+4. Create core UI components and layout
+5. Integrate routing and navigation
+6. Implement data fetching and state logic
+7. Build forms with validation and error states
+8. Add global error handling and fallback UIs
+9. Add unit and E2E tests
+10. Optimize performance and bundle size
+11. Ensure accessibility compliance
+12. Document components, composables, and stores
+
+## Additional Guidelines
+- Follow Vue’s official style guide (vuejs.org/style-guide)
+- Use ESLint (with `plugin:vue/vue3-recommended`) and Prettier for code consistency
+- Write meaningful commit messages and maintain clean git history
+- Keep dependencies up to date and audit for vulnerabilities
+- Document complex logic with JSDoc/TSDoc
+- Use Vue DevTools for debugging and profiling
+
+## Common Patterns
+- Renderless components and scoped slots for flexible UI
+- Compound components using provide/inject
+- Custom directives for cross-cutting concerns
+- Teleport for modals and overlays
+- Plugin system for global utilities (i18n, analytics)
+- Composable factories for parameterized logic