Skip to content

betterDefine

Stability: stable

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

Related issue

FeaturesSupported
Vue 3
Nuxt 3
Vue 2
TypeScript

Basic Usage

vue
<script setup lang="ts">
import type { 
BaseProps
} from './types'
interface Props extends
BaseProps
{
foo
: string
} const
props
=
defineProps
<Props>()
</script>
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
  • Index Signature
    ts
    interface Type {
      [key: string]: string
    }
  • Generics will be ignored directly

What are Key Places?

  • The names of props.
ts
// ✅
defineProps<{
  foo: ComplexType
}>()

// ❌
defineProps<{
  [ComplexType]: string
}>()
  • The names of emits.
ts
interface Emits {
  (event: 'something', value: ComplexType): void // ✅
  (event: ComplexType): void // ❌
}

Contributors

The avatar of contributor named as renovate[bot] renovate[bot]
The avatar of contributor named as zhiyuanzmj zhiyuanzmj
The avatar of contributor named as Kevin Deng Kevin Deng

Changelog