Support Nuxt 3

[chuckn0rris]

Forum post

bryntum-nuxt3-main.zip

[Abdulla1995]

I reported this also on Nuxt. And there was known issue.
My issue - #5527
Fix issue - nuxt/nuxt#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: vuejs/core#9388 and here: nuxt/nuxt#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 !