Search code examples
vue.jsvuejs3composablevue-render-function

Vue3 composable with render


Is it possible to create a composable function that would use render function so it can display something?

Example:

import { h } from 'vue'

export function useErrorHandling() {
  return {
    render() {
        return h('div', { class: 'bar', innerHTML: 'world!' })      
    }
  }
}
<script setup>
import { useErrorHandling } from './mouse.js'

 useErrorHandling()
</script>

<template>
 hello
</template>

plaground with above example


Solution

  • Yes It is possible to do that you need just store the value returned by the composable in a variable and use it as a component

    const err =  useErrorHandling()
    //in template 
    // <err />
    

    Playground Example