Nuxt integration

[Romick2005]

It is possible to handle Nuxt ssr using this library?

[gmsa]

I don't really know...

[gmsa]

After reading this, I don't think so: https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon If anyone could take a look at this and submit a PR would be great!

[bensladden]

@Romick2005 from what i have played with i did get it to work by defining a plugin and then setting ssr to false. Refer to this https://vue-grid.glitch.me/

& this: https://github.com/nuxt/nuxt.js/issues/975

[highalps]

vue-grid-layout does not support SSR, so you must handling CSR (using <no-ssr> tag and plugin with ssr: false option)

[zlodes]

@Romick2005

@gmsa, maybe add this to README or wiki?

1. Create plugins/vue-grid.js with content:

import Vue from 'vue';
import VueGridLayout from 'vue-grid-layout'

Vue.component('grid-layout', VueGridLayout.GridLayout);
Vue.component('grid-item', VueGridLayout.GridItem);

2. Add plugin to nuxt.config.js like this:

  plugins: [
    {src: '~/plugins/vue-grid', ssr: false},
  ],

3. Wrap VueGrid components with

<no-ssr></no-ssr>

[matamune94]

Is there any other way ? i don't want use it in gobal .

[suettenbachsv]

@zlodes

Thanks so much. Still working for any who's interested.

[cipiasentini]

@zlodes is this still working? I did the exact same thing as you did (except the no-ssr tag, that I replaced with client-only because of depreaction). I get 7 errors:

• Property or method "layout" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
• Property or method "layout" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
• Property or method "layout" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
• Property or method "layout" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
• Property or method "layout" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
• Error: Layout must be an array!
• TypeError: Cannot read property 'uninstall' of undefined

[funkel1989]

with Vue3 out now supporting SSR along with nuxt in talks of doing a Vue 3 version sometime in the future, are their plans on adding to this plugin to support SSR of any kind? If not then it should be posted here and this issue be closed instead of having an open issue talking about it since 2018 because it makes me think someone is actively working towards or planning to actively work towards SSR. (Just my two cents)

[gmsa]

Is it possible for someone to create a demo project working with SSR? I've never used SSR and it would go a long way to help...

[brolnickij]

Solution for nuxt 3

• Install npm dependency [email protected]

"dependencies": {
  "vue-grid-layout": "3.0.0-beta1"
}

• Create plugins/grid.client.ts with content

import { defineNuxtPlugin } from '#app'
// @ts-ignore
import VueGridLayout from 'vue-grid-layout'


export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGridLayout)
})

• Wrap vue-grid-layout components with client-only

<client-only>
  <grid-layout>
    <grid-item></grid-item>
  </grid-layout>
</client-only>

[g-tejas]

Solution for nuxt 3

• Install npm dependency [email protected]

"dependencies": {
  "vue-grid-layout": "3.0.0-beta1"
}

• Create plugins/grid.client.ts with content

import { defineNuxtPlugin } from '#app'
// @ts-ignore
import VueGridLayout from 'vue-grid-layout'


export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGridLayout)
})

• Wrap vue-grid-layout components with client-only

<client-only>
  <grid-layout>
    <grid-item></grid-item>
  </grid-layout>
</client-only>

I seem to be getting this error Any idea how to fix this?. Im using nuxt 3 rc3

[r0hit5292]

resize option is not working with nuxt 3. how to resolve that?

[jakhsu]

@brolnickij such a life saver! Really appreciate the example with Nuxt 3

[ankithedau]

@brolnickij @g-tejas @zlodes i am getting "document is not defined"