Is it possible render vue component in composable

[ademyalcin27]

Hello,
I want to render vue component in composable method and I need HTML output I will add to DOM.
Is there any solution for that

thanks

[s3xysteak]

Yes! You could return a VNode/Component.

import CompImport from './Bar.vue'

export function useFoo() {
  const vnode = h('div', 'hello')
  const FunctionalComp = () => h('div', 'Functional! ')
  const Comp = defineComponent(() => {
    return () => h('div', 'world')
  })

  return {
    vnode,
    FunctionalComp,
    Comp,
    CompImport,
    CompImportChanged: () => h(CompImport, { foo: 'bar' })
  }
}

<script setup>
const { vnode, Comp } = useFoo()

const V = () => vnode
</script>

<template>
  <V />
  <Comp />
</template>

[ademyalcin27]

but I don't want to use composable in vue component. I want to use HTML output in composable and I want to add this output to DOM with appendChild method

[s3xysteak]

It sounds like what you have done in main.js and index.html. See the playground. In the example I use the refer of the template element. According to what you need, you can use document.createElement instead.

function newApp() {
  const el = document.createElement()
  // ... See the playground above
  return el
}