Support Nuxt 3

[chuckn0rris]

Forum post

bryntum-nuxt3-main.zip

[Abdulla1995]

I reported this also on Nuxt. And there was known issue. My issue - https://github.com/bryntum/support/issues/5527 Fix issue - https://github.com/nuxt/nuxt.js/issues/13471 My fix: in nuxt.config.js file add this to disable transition which break things:

app: {
    pageTransition: false
}

If you want to disable for only this problematic routes:

definePageMeta({
  pageTransition: false
  //layoutTransition: false
})

[chuckn0rris]

Another request

[awacode21]

Not much happening here since one year?

My problem: https://forum.bryntum.com/viewtopic.php?t=26907

The described "workaround" with disabling the page transitions does not work at all. The related upstream issue in vue got fixed 3 weeks ago, see here: https://github.com/vuejs/core/pull/9388 and here: https://github.com/nuxt/nuxt/issues/13471

So if this was really the problem, we should expect it to work, but it is still not working! I am on latest Nuxt 3 version 3.8.1

As soon as i do import { BryntumGrid } from "@bryntum/grid-vue-3"; it breaks the page and every link to that page.

[awacode21]

Looks like the upstream issue in vue and nuxt already got fixed! But i still get this error when trying to use bryntum with nuxt. So there must be an issue within the bryntum code. Or maybe @bryntum/grid-vue-3 is not using correct vue version? Is anyone working on it? Cause this issue here seems stale for quite a while?

[awacode21]

i found a working workaround by myself. Adding this to nuxt.config file:

export default defineNuxtConfig({
  vite: {
    optimizeDeps : {
      include : ['@bryntum/grid', '@bryntum/grid-vue-3']
  }
  },
})

fixes the "500 - The Bryntum Grid bundle was loaded multiple times by the application" issue for me. This actually has nothing to do with nuxt as this is about the vite configuration. It looks like you have an issue with your dependency management, or how you export things or how you handle mjs vs cjs.. whatever that leads to the problem of multiple loading. The optimizeDeps cleans that up for me so i can progress with my work, But you should have a look on this thing.

[matsbryntse]

Thanks for sharing your findings, we'll dig into this asap! 🙏

[SergeyMaltsev]

@awacode21 It is required for dev server which uses esbuild and it sometimes splits code into wrong chunks. Thay have a note in their docs that code splitting may have problems https://esbuild.github.io/api/#splitting + opened issue. That config helps esbuild with correct chunk splitting. The same config is required for vite application and already included in all our demos.

[marciogurka]

+1

[SergeyMaltsev]

@marciogurka Our components are not compatible with SSR We have a guide for React Next.js https://bryntum.com/products/grid/docs/guide/Grid/integration/react/guide#loading-components-dynamically-with-next-js

Most likely same approach can be for NUXT. Please check if that works. https://javascript.plainenglish.io/crank-up-auto-import-for-dynamic-nuxt-js-components-54e7f198fc16

[buettse]

is a nuxt "fix" done soon? we need it !

[jsakalos]

As @SergeyMaltsev said "Our components are not compatible with SSR" and that has no immediate "fix." Our components do need a browser environment to work. Therefore, if you can prevent the page with grid (or other component) from being server side rendered, all should work as expected.

The problem and solution is same or similar to Next.js for which we have a section in the guide (the link is above). Although the details of disabling SSR may be different in NUXT, the principle is same.

[SergeyMaltsev]

There's no bug in Grid component. You need to setup it to work at client side (no ssr).

This is how to do this:

Create basic Nuxt app

npm install nuxi
npx nuxi init my-nuxt3-app
cd my-nuxt3-app

Install Bryntum Grid

npm install @bryntum/[email protected]
npm install @bryntum/[email protected]

Register Grid as plugin

plugins/bryntum-grid.js

import { defineNuxtPlugin } from '#app';
import { BryntumGrid } from '@bryntum/grid-vue-3';
import '@bryntum/grid/grid.stockholm.css';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('BryntumGrid', BryntumGrid);
});

Add to nuxt Config

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    devtools : { enabled : true },
    plugins: [
        { src: '~/plugins/bryntum-grid.js', mode: 'client' }
    ],
    vite     : {
        optimizeDeps : {
            // Specify dependencies for optimization
            include : ['@bryntum/grid', '@bryntum/grid-vue-3']
        }
    }
});

Note: Vite optimizeDeps setting is required to fix esbuild code-splitting bug when you run app with dev server.

Create Grid client-only Component

components/BryntumGridComponent.vue

<template>
    <client-only>
        <BryntumGrid
            :columns="columns"
            :data="data">
        </BryntumGrid>
    </client-only>
</template>

<script setup>
import { ref } from 'vue';

const columns = ref([
    { field: 'name', text: 'Name' },
    { field: 'age', text: 'Age' }
]);

const data = ref([
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
]);
</script>

<style scoped>
/* Add any necessary styles for your grid component */
.b-grid {
    /* Set the height to 100% of the viewport height */
    height: 100vh;
}
</style>

Add Grid client-only Component

app.vue

<template>
    <div>
        <h1>My Nuxt App with BryntumGrid</h1>
        <BryntumGridComponent/>
    </div>
</template>

<script setup>
import BryntumGridComponent from '~/components/BryntumGridComponent.vue';
</script>

<style scoped>
/* Add your styles here */
</style>

Run application.

npm run dev

Please see attached zip. Readme.MD is inside. vue-3-nuxt-grid-app.zip