Server Side Rendering: Nuxt 3 support

[jakhsu]

Nuxt 3 support

Tried to use this in Nuxt 3 but seems like it doesn't work out-of-the-box

Your environment

gridstack: "^7.2.3" stackblitz

Steps to reproduce

npm install --save gridstack https://stackblitz.com/edit/nuxt-starter-yuoyxf?file=package.json,app.vue

Expected behavior

shows error document is not defined, which I assume is due to Nuxt's SSR, but wrapping the divs in <ClientOnly> component doesn't work and not sure how to deal with the script part.

[jakhsu]

Tried to follow the vue3 example,

See reproduction: https://stackblitz.com/edit/nuxt-starter-yuoyxf?file=package.json,app.vue

Would really appreciate it if anyone can provide a minimal working template for nuxt 3

[stephenjason89]

Yup there's a problem with this package and nuxt 3. Primarily when importing gridstack from SSR Here's how you can use it for now, https://stackblitz.com/edit/nuxt-starter-weppuk?file=app.vue

I hope @adumesny can do something to import it only on the client side for the moment. But much better if gridstack can be loaded from SSR and just hydrated on client side.

[adumesny]

is this a server side rendering issue per say ? yeah, GS was only tested on client browsers - have not tried to make SSR work, nor is there immediate plan for it (not something I've seen a lot of request for).

[jakhsu]

Yeah I believe it's SSR that's causing these problems. I understand that this is not a highly request feature and want to respect the maintainers' time and effort. This was just meant to bring awareness to this issue. Thank you @adumesny for this wonderful repo :) Feel free to close this if you'd like.

[fredericrous]

I put a 👍 to vote for this feature. I encourage you all to do the same. @jakhsu I'm using Remix.run. Other frameworks will benefit from this feature: NextJS, Nuxt, Angular, Svelte Kit.

At the moment, gridstack loads on Remix (or Next) but it shows these warnings in the console

react-dom.development.js:86 Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed

[adumesny]

not sure why you list Angular above. Not only it's what I use at work, but I include an angular wrapper out of the box now too, so works just fine... no SSR required.

[fredericrous]

ssr is opt-in on angular https://angular.io/guide/ssr I know you are the pro ;) I won't touch angular ever again, I had my share of painful updates. I worked with it from v1.5 up to v4

[adumesny]

Angular v1 and v2+ are totally different beast - they only shared the name :)

[stephenjason89]

@adumesny I think a simple fix can be implemented here. Since I really loved your project, I created a PR #2596 . Please let me know if this is good enough.

I improved the getElement and getElements to handle document when undefined. And also, returned early in init and initAll when document is undefined.

Actually the latter is all that we need since getElement and getElements won't execute anymore. I just adjusted it so future revisions won't have an ssr problem. You can safely getElement & getElements without worry of breaking ssr.

Thank you

[nickeblewis]

We are trying to implement this within a Nuxt 2 project at the moment and having no luck for similar reasons I guess to the above conversation.

[adumesny]

you should not get an error anymore as that review was picked - read the thread there.

[adumesny]

closing since error is gone. rest can be new request if somebody want to contribute.