Can I define a Vue JSX component within a SFC <script setup> and use it in the SFC template?

user_561341 0
Viewed 141

I like that in React you can quickly create small components within the main component file. Is something like that possible with Vue 3 composition API?

Something like this:

Component.vue

<script setup>
    const SmallComponent = <div>Test</div>
</script>
<template>
    <SmallComponent/>
</template>
jsx vuejs3 vue-composition-api vue.js javascript
1 Answers

The problem here is that SmallComponent is not a component but vnode object. Vnodes can be directly rendered in render functions but not templates.

Instead, it should be functional component:

const SmallComponent = props => <div>Test</div>

In script setup, it's the only available option, because the syntax provides a subset of functionality and doesn't support render functions.

user_37315010
Related