How to use render function in script setup syntax?

[mitow7821]

While using normal setup function we can use:

return () => h( 'div', {}, 'someText' )

How could i do this in setup based syntax?

[posva]

Remember to use the forum or the Discord chat to ask questions!

setup() {
  return () => h('div', {}, 'some text')
}

[LinusBorg]

@posva I think he's asking about <script setup>, to which the answer, as far as I see it, is: You can't.

And I also don't really see why you would need to. When using the render function, the only "benefit" that script setup would have over a normal <script> is that you would save 4 lines of code, of which two are closing curly brackets:

<script setup>
import Component from './Component.vue'

const msg = ref('Hello World')
// OP wants render function here
</script>

vs.

<script>
import Component from './Component.vue'

export default {
  setup() {
    const msg = ref('Hello World')
    // render function can be returned here.
  }
}
</script>

... and that could be further reduced by writing a small helper function to wrap that in.

By using a render function, you already can access al imported components directly without the need to register them, as well as any other imports, so that advantages goes away.

And things like. defineProps() or defineEmit() are not in any notable way shorter or easier than the normal counterparts.