vue3-typescript-auto

Vue 3 with TypeScript Standards

Modern Vue 3 development with TypeScript, emphasizing type safety, Composition API, and performance.

Critical Rules

• Use Composition API with <script setup lang="ts"> syntax
• Type all props, emits, reactive data, and composables explicitly
• Use defineModel() for 2 way binding v-model and defineSlots() for slot typing
• Follow PascalCase naming for components
• Use proper provide/inject typing with injection keys
• Type watchers explicitly and ensure proper cleanup
• Optimize performance with computed properties and shallow reactivity

  ✅ Use Composition API with proper typing:
  <script setup lang="ts">
  interface Props {
    title: string
    count?: number
  }
  interface Emits {
    (e: 'update', value: number): void
  }
  interface Slots {
    default(props: { item: string }): any
    header(): any
  }
  
  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()
  const slots = defineSlots<Slots>()
  const model = defineModel<string>()
  const count = ref<number>(0)
  const doubleCount = computed<number>(() => count.value * 2)
  </script>
  
  ❌ Avoid Options API and untyped refs:
  const props = defineProps(['title'])
  const count = ref(0)

examples:

• input: | const props = defineProps(['title']) const model = defineModel() const count = ref(0) output: | interface Props { title: string } const props = defineProps() const model = defineModel() const count = ref(0) metadata: priority: high version: 1.0