beginner

Props with TypeScript

Define typed props in Vue components using the Composition API.

<script setup lang="ts">
import { ________ } from 'vue'

interface Props {
  label: string
  variant?: 'primary' | 'secondary' | 'danger'
  disabled?: boolean
  size?: 'sm' | 'md' | 'lg'
}

const props = __________...(__________..., {
  variant: 'primary',
  disabled: false,
  size: 'md',
})

const buttonClasses = computed(() => [
  'btn',
  `btn-${props.variant}`,
  `btn-${__________}`,
  { 'btn-disabled': props.disabled },
])
</script>

<template>
  <button :class="buttonClasses" :disabled="props.disabled">{{ label }}</button>
</template>

0/4 filled tab moves · Ctrl+↵ submits · Ctrl+Shift+↵ runsstarter code