I try to implement Grid on Nuxt 3 project but getting error. I checked @bryntum/grid-vue-3 and also native @bryntum/grid/grid.module with setup API and it starts when I reload the page. But when I move to another page and come back I see this error:
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
I checked that document.getElementById('mygrid') is null when I come from another route. Seems bryntum somehow clear the element itself.
Type: Bryntum Pro - Paid version
Versions:
"@bryntum/grid": "5.2.1",
"@bryntum/grid-vue-3": "5.2.1"
Implementation1 - Native:
<template>
<div id="mygrid" ref="gridRef">grid here</div>
</template>
<script setup>
import { Grid } from '@bryntum/grid/grid.module'
let gridNew;
onMounted(() => {
gridNew = new Grid({
appendTo : "mygrid",
height : 400,
data : [
{ name : 'Dan Stevenson', city : 'Los Angeles' },
{ name : 'Talisha Babin', city : 'Paris' }
],
columns : [
{ field : 'name', text : 'Name', width : 200 },
{ field : 'city', text : 'City', flex : 1 }
]
});
})
</script>
Implementation 2- Vue-3:
<template>
<ClientOnly>
<bryntum-grid
v-bind="gridConfig"
/>
</ClientOnly>
</template>
<script setup>
import { BryntumGrid } from '@bryntum/grid-vue-3'
const gridConfig = {
data : [
{ name : 'Dan Stevenson', city : 'Los Angeles' },
{ name : 'Talisha Babin', city : 'Paris' }
],
columns : [
{ field : 'name', text : 'Name', width : 200 },
{ field : 'city', text : 'City', flex : 1 }
]
}
Also when I implement the vue-3 module I see dublicate registration error. Then change import { BryntumGrid } from '@bryntum/grid-vue-3' to import { Grid } from '@bryntum/grid' and then back to import { BryntumGrid } from '@bryntum/grid-vue-3' it works!
Need urgent help.