Skip to content

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.

FeaturesSupported
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

ts
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.

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