setupComponent

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

TIP

defineRender cannot be disabled when using setupComponent.

Files in node_modules will be ignored by default.

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

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

See also Vue Vine - another style for Vue functional component.

Basic Usage

tsx

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

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

  defineOptions
({
    name
: 'App',
  })

  // ...
  return <div
 />
})

Type Annotation

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

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

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