vue-typescript

name	vue-typescript
description	Provides Vue 3 + TypeScript patterns — Composition API, script setup, Pinia, Vue Router, composables. Use when building Vue apps or wiring reactive state.
disable-model-invocation	true

Vue 3 + TypeScript Patterns

Overview

Modern Vue 3 patterns with TypeScript and Composition API for building robust applications.

Component Patterns

Script Setup with TypeScript

<script setup lang="ts">
import { ref, computed } from 'vue';

interface Props {
  title: string;
  count?: number;
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
});

const emit = defineEmits<{
  (e: 'update', value: number): void;
  (e: 'close'): void;
}>();

const localCount = ref(props.count);

const doubled = computed(() => localCount.value * 2);

function increment() {
  localCount.value++;
  emit('update', localCount.value);
}
</script>

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>Count: {{ localCount }} (doubled: {{ doubled }})</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Generic Components

<script setup lang="ts" generic="T">
interface Props {
  items: T[];
  selected?: T;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: 'select', item: T): void;
}>();
</script>

<template>
  <ul>
    <li
      v-for="(item, index) in items"
      :key="index"
      :class="{ selected: item === selected }"
      @click="emit('select', item)"
    >
      <slot :item="item" />
    </li>
  </ul>
</template>

Composables

Basic Composable

// composables/useCounter.ts
import { ref, computed }  ;

  {
  ?: ;
  ?: ;
  ?: ;
}

  () {
   { initial = , min, max } = options;
   count = (initial);

    = () => {
     (max ===  || count. < max) {
      count.++;
    }
  };

    = () => {
     (min ===  || count. > min) {
      count.--;
    }
  };

    = () => {
    count. = initial;
  };

   isAtMin = ( min !==  && count. <= min);
   isAtMax = ( max !==  && count. >= max);

   {
    count,
    increment,
    decrement,
    reset,
    isAtMin,
    isAtMax,
  };
}