I am new to Vue, so sorry if I am asking something trivial, maybe I just need a pointer to a proper API.
I have a third-party SDK I can render custom UI by implementing a function that “returns DOM elements or React components”. The basic example looks like this:
<code>const renderCustomComponent = () => {
const parent = document.createElement('div');
parent.innerHTML = '<h2>Some custom content</h2>';
return parent;
};
</code>
<code>const renderCustomComponent = () => {
const parent = document.createElement('div');
parent.innerHTML = '<h2>Some custom content</h2>';
return parent;
};
</code>
const renderCustomComponent = () => {
const parent = document.createElement('div');
parent.innerHTML = '<h2>Some custom content</h2>';
return parent;
};
I also have a Vue component, lets call it MyGreeting.vue
:
<code><script setup lang="ts">
defineProps<{
greeting: string;
}>();
</script>
<template>
<h2>{{ greeting }}</h2>
</template>
</code>
<code><script setup lang="ts">
defineProps<{
greeting: string;
}>();
</script>
<template>
<h2>{{ greeting }}</h2>
</template>
</code>
<script setup lang="ts">
defineProps<{
greeting: string;
}>();
</script>
<template>
<h2>{{ greeting }}</h2>
</template>
So I would like my renderCustomComponent
to load MyGreeting
with properties. I.e.:
<code>const renderCustomComponent = () => {
return // MyGreeting with properties
}
</code>
<code>const renderCustomComponent = () => {
return // MyGreeting with properties
}
</code>
const renderCustomComponent = () => {
return // MyGreeting with properties
}
It’s also OK if I need to wrap it in a div:
<code>const renderCustomComponent = () => {
const parent = document.createElement('div');
// load MyGreeting with properties into parent
return parent;
};
</code>
<code>const renderCustomComponent = () => {
const parent = document.createElement('div');
// load MyGreeting with properties into parent
return parent;
};
</code>
const renderCustomComponent = () => {
const parent = document.createElement('div');
// load MyGreeting with properties into parent
return parent;
};
How can I do that?