Open Romick2005 opened 5 years ago
I don't really know...
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!
@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/
vue-grid-layout does not support SSR, so you must handling CSR
(using <no-ssr>
tag and plugin with ssr: false
option)
@Romick2005
@gmsa, maybe add this to README or wiki?
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:
```js
plugins: [
{src: '~/plugins/vue-grid', ssr: false},
],
<no-ssr></no-ssr>
Is there any other way ? i don't want use it in gobal .
@zlodes
Thanks so much. Still working for any who's interested.
@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:
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)
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...
Install npm dependency vue-grid-layout@3.0.0-beta1
"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`
```html
<client-only>
<grid-layout>
<grid-item></grid-item>
</grid-layout>
</client-only>
Solution for nuxt 3
- Install npm dependency
vue-grid-layout@3.0.0-beta1
"dependencies": { "vue-grid-layout": "3.0.0-beta1" }
- Create
plugins/grid.client.ts
with contentimport { 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
resize option is not working with nuxt 3. how to resolve that?
@brolnickij such a life saver! Really appreciate the example with Nuxt 3
@brolnickij @g-tejas @zlodes i am getting "document is not defined"
It is possible to handle Nuxt ssr using this library?