Vue3 composable with render

Question

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

Youness Ait Ali · Accepted Answer · 2022-09-05 11:15:18Z

6

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

answered Sep 5, 2022 at 11:15

Youness Ait Ali

3113 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BT101 Over a year ago

Aha, thanks. It's not possible to show something (for example teleported to body toast) without the component instance?

Youness Ait Ali Over a year ago

Yes, it is possible. You need to get an instance of the component and append the toast component to it. You can do that by making a reference to the root component using ref or using getCurrentInstance from the internal API. Here is a demo, but I'm not sure if it's a good practice or not 😅

JackChouMine · Accepted Answer · 2023-06-19 19:02:45Z

0

createApp and mount can help you.

function HelloWorld({ fontSize }) {
  return h(
    'div',
    {
      style: {
        color: 'red',
        fontSize,
      },
    },
    'Hello World'
  )
}
const app2 = createApp(HelloWorld, {
  fontSize: '30px',
})
app2.mount('#app-2') // pass selector you want to mount

answered Jun 19, 2023 at 19:02

JackChouMine

1,19213 silver badges27 bronze badges

Collectives™ on Stack Overflow

Vue3 composable with render

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related