Vue 3.3: New Features and Improvements

Vue 3.3 brings significant improvements to TypeScript support and developer experience.

Improved TypeScript Support

Typed Slots

<script setup lang="ts">
defineSlots<{
  default?: (props: { msg: string }) => void
  header?: (props: { title: string }) => void
}>()
</script>

Generic Components

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

defineModel Macro

<script setup>
const modelValue = defineModel()
const [title, titleModifiers] = defineModel('title')

// With default
const count = defineModel({ default: 0 })
</script>

<template>
  <input v-model="modelValue" />
  <input v-model="title" />
</template>

defineOptions Macro

<script setup>
defineOptions({
  name: 'MyComponent',
  inheritAttrs: false
})
</script>

Better Props Definition

<script setup lang="ts">
interface Props {
  title: string
  count?: number
}

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

defineEmits Improvements

<script setup lang="ts">
const emit = defineEmits<{
  change: [id: number]
  update: [value: string]
}>()
</script>

useTemplateRef

<script setup>
import { useTemplateRef } from 'vue'

const input = useTemplateRef<HTMLInputElement>('input')

function focus() {
  input.value?.focus()
}
</script>

<template>
  <input ref="input" />
</template>

Conclusion

Vue 3.3 significantly improves the TypeScript experience while adding useful new macros for common patterns.