Problem: Visjs docs shows examples of how to use react templates in visjs for customs items but not for vue.
Solution: we need to use vue render functions to render the template while passing props to the child and emitting events back to the parent.
I solved the issue where groupTemplate don't want to load.
(answer updated)
So making the render function async seems to solve it :D
I will just leave this here for future people. Struggled all day trying to get the group template to work.
I would have thought defineAsyncComponent would solve it but it did not quite budge, seems just asynchronously loading the render function does the trick.
import { render, h } from 'vue';
const itemTemplate = async (item, element) => render(h(bar, {
onDelete: (ev) => {
items.remove(item.id)
},
item,
}), element
)
const groupTemplate = async (group, element) => render(h(groupbar, {
onHide: () => {
groups.update(group.id, { hidden: true })
},
group,
}), element
)
const options = ref({
template: (item, element) => {
if (!item) return;
return itemTemplate(item, element);
},
groupTemplate: (group, element) => {
if (!group) return;
return groupTemplate(group, element);
}
})
template
<template>
<div class="group-container">
<button @click="emits('hide', group.id)">hide</button>
{{ group.content }}
</div>
</template>
<script setup>
import { watch } from 'vue';
const emits = defineEmits(['hide']);
const props = defineProps({
group: {
type: Object
}
})
</script>
<style>
.group-container {
background: red;
}
</style>