Skip to content

setupComponent

Stability: experimental ⚠️ Experimental feature, use at your risk

TIP

If you're using setupComponent, then defineRender cannot be disabled.

Files in node_modules will not be ignored by default.

With defineSetupComponent, <script setup> code can be put in pure JS/TS(X) without Volar extension.

FeaturesSupported
Vue 3
Nuxt 3
Vue 2
TypeScript

Basic Usage

ts
export const App = defineSetupComponent(() => {
  defineProps<{
    foo: string
  }>()

  defineEmits<{
    (evt: 'change'): void
  }>()

  defineOptions({
    name: 'App',
  })

  // ...
})
export const App = defineSetupComponent(() => {
  defineProps<{
    foo: string
  }>()

  defineEmits<{
    (evt: 'change'): void
  }>()

  defineOptions({
    name: 'App',
  })

  // ...
})

Type Annotation

ts
export const App: SetupFC = () => {
  defineProps<{
    foo: string
  }>()

  defineEmits<{
    (evt: 'change'): void
  }>()

  defineOptions({
    name: 'App',
  })
}
export const App: SetupFC = () => {
  defineProps<{
    foo: string
  }>()

  defineEmits<{
    (evt: 'change'): void
  }>()

  defineOptions({
    name: 'App',
  })
}

Known Issues

  • TypeScript support is not yet completed.
  • The source map does not correspond properly.