[VUE 3] Rendering VUE Components in GridCell

[th@digi3]

Hello everyone,

i'm trying to render a custom vue-component into a GridCell (via column of type 'template').
From the examples i can see that it is possible but sadly there is no code-inspection for the VUE3 examples.

So i have a two-fold question:

1. Are there code-snippets for the VUE3 examples given by Bryntum (the npm-repo sadly couldn't provide me with them)
2. If there are no snippets i can learn from, can someone give me some tips/directions on how to do it (i found an older VUE2 workaround here, but that doesn't work in VUE3 since there is no 'extend' method)

thanks in advance and kind regards.
TH

[th@digi3]

Update: I found a solution, but i'd still like to know if the VUE3 examples will get code-inspection, because my solution feels more like a hack than a propper way of doing this

workaround/solution:

const wrapper = document.createElement('div');
const someComponentInstance = createApp(SomeComponent, {
    someProp: 'prop-value-123'
});
const mounted = someComponentInstance.mount(wrapper); // returns an instance containing `$el.innerHTML`
console.log(mounted.$el.innerHTML);

[saki]

I've tested a similar approach so I'll describe the proof-of-concept that worked for me (using Vue 3 basic grid demo):

A) I've created VueRenderer.vue component with this content:

<template>
    <b>{{ value }}</b>
</template>
<script>

export default {
    props: ['record'],
    setup(props) {
        return {
            value:props.record.food
        }
    }
}
</script>

B) I've used this renderer:

import { createApp } from 'vue';
import VueRenderer from './components/VueRenderer.vue'

// etc.
        columns: [
            {
                text  : 'Food',
                field : 'food',
                flex  : 1,
                renderer({cellElement, record}) {
                    createApp(VueRenderer, {record}).mount(cellElement);
                }
            },

// etc.

And it works – I get bold food name.

However, this is just a proof of concept because vue components are created one-per-cell, never destroyed or re-used so a production version would need to handle this situation.

Anyway, it's a good starting point.