Vue Coding Standards - Copilot Instructions

copilot-instructions.md

Project coding standards

TypeScript Guidelines

• Use TypeScript for all new code
• Follow functional programming principles where possible
• Prefer interfaces for data structures and type definitions
• Prefer immutable data (const, readonly)
• Use optional chaining (?.) and nullish coalescing (??) operators

Vue Guidelines

• Use VUE composition API
• Use setup and typescript <script setup lang="ts">
• Order the script first then the template
• Never use style block only tailwind classes for styling

App Specific Guidelines for Components Built for /apps/*

• Prefer using components found in /packages/ui
• When using imported components, Use template slots variants or options provided by the component

Naming Conventions

• Use PascalCase for component names, interfaces, and type aliases
• Use camelCase for variables, functions, and methods
• Prefix private class members with underscore (_)
• Use ALL_CAPS for constants
• Use kebab case for filenames, vue component names and attributes/props to components when used in template blocks

Error Handling

• Use try/catch blocks for async operations
• Always log errors with contextual information