betterDefine

Stability: stable

With enabling betterDefine, imported types are supported in <script setup> type-based-macros.

Related issue

Features	Supported
Vue 3	✅
Nuxt 3	✅
Vue 2	✅
TypeScript	✅

Basic Usage

App.vue

<script setup lang="ts">
import type { BaseProps } from './types'

interface Props extends BaseProps {
  foo: string
}
const props = defineProps<Props>()
</script>

types.ts

type BaseProps = {
  title: string
}

export type { BaseProps }

⚠️ Limitations

Complex types

Complex types are not supported in some key places. For example:

What are Complex Types?

• All utility types
  • Built-in types
  • All types from type-fest package.
  • typeof keyword.
  • ...
• Index Signature

  interface Type {
    [key: string]: string
  }

• Generics will be ignored directly

What are Key Places?

• The names of props.

// ✅
defineProps<{
  foo: ComplexType
}>()

// ❌
defineProps<{
  [ComplexType]: string
}>()

• The names of emits.

interface Emits {
  (event: 'something', value: ComplexType): void // ✅
  (event: ComplexType): void // ❌
}

Contributors

Kevin Deng

Changelog

Last edited about 11 hours ago

View full history

4e2cca7-refactor: remove dev condition from exports