- Ensure all components support accessibility first design
- Ensure all components support accessibility first design
- Implement privacy-preserving features by default
- Implement privacy-preserving features by default
- Support progressive enhancement across devices
- Support progressive enhancement across devices
@ -102,229 +129,62 @@ When developing new features, be mindful of these constraints:
- Build trust-enabling interactions
- Build trust-enabling interactions
- Optimize for low resource requirements
- Optimize for low resource requirements
- Support offline-first functionality where possible
- Support offline-first functionality where possible
- Use class-based syntax with decorators from vue-facing-decorators.
- Should attempt to maximize Lighthouse Score as close to 100 as possible.
- Use Lighthouse for performance scoring
## Vue Component Structure
# Vue Component Structure
- Use `@Options`, `@Ref`, `@Prop`, `@Emit`, and `@Watch` Typescript decorators for clear component structure
- Use `@Options`, `@Ref`, `@Prop`, `@Emit`, and `@Watch` decorators for clear component structure
- Extend `Vue` class with proper type annotations for props, refs, and methods
- Extend `Vue` class with proper type annotations for props, refs, and methods
- Use Tailwind utility classes for accessible and responsive design
- Use Tailwind utility classes for accessible and responsive design
- Avoid `setup()` or Composition API; use class syntax consistently
- Avoid `setup()` or Composition API; use class syntax consistently
- Keep methods pure when possible; extract logic into utilities
- Keep methods pure when possible; extract logic into utilities
- Ensure lifecycle methods are clearly defined inside class
- Ensure lifecycle methods are clearly defined inside class
- Use semantic HTML + Tailwind classes for styling
- Use semantic HTML + Tailwind classes for styling
- Pinia for state management
[rules.component-class]
description = "Create a privacy-aware Vue 3 component"
## Vue Facing Decorators
trigger = "vfd-component"
insert = """
- Ensure all Vue 3 components are written using TypeScript with strict type checking enabled.
import { Options, Vue } from 'vue-facing-decorator'
- Always include explicit types for props, emits, and reactive properties.
import { PlatformService } from '@/services/platform'
- When using @Options, ensure it includes metadata like name, template, or styles.
- Use @Prop for defining props with validation and default values.
@Options({
- Use @Emit for emitting events with proper payload typing.
name: 'MyComponent',
- Use @Watch for reactive property changes, and @Ref for DOM references."
props: {},
- Organize Vue 3 components with a clear structure: imports at the top, followed by @Options metadata, then class properties (props, refs, reactive state), lifecycle hooks, methods, and finally @Watch or @Emit handlers.
emits: ['error', 'privacy-consent'],
- Ensure all props have explicit types and optional validation.
})
- Use TypeScript interfaces or types for complex prop structures.
export default class MyComponent extends Vue {
- Validate default values for props where applicable.
private platformService = new PlatformService()
- Use lifecycle hooks (e.g., onMounted, onUnmounted) sparingly and document their purpose.
- Avoid side effects in lifecycle hooks unless absolutely necessary.
// Lifecycle
- Use @Emit for emitting events with strongly typed payloads.
mounted() {
- Ensure event names are descriptive and match the action being performed.
this.checkPrivacyConsent()
- Use ref or reactive for managing internal state.
}
- Avoid overusing reactive state for simple values. Prefer computed properties for derived state.
- Write unit tests for components using Vue Test Utils and Jest/Vitest.
// Privacy check
- Ensure tests cover props, events, and lifecycle behavior.
private async checkPrivacyConsent() {
- Avoid unnecessary re-renders by using v-once for static content and memoizing expensive computations with computed properties.
Matthew Raymer
2 months ago