setupComponent 
Stability:
experimental ⚠️ Experimental feature, use at your riskTIP
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
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
Kevin Deng