Open hadelnasr opened 4 years ago
Hmmm, I can't really see what is wrong here. Is it possible to include the entire page?
Facing some kind of same issue :
Parent:
<div class="masonry-item" style="padding-top:8px;padding-bottom:8px;">
vue.runtime.esm.js:6426
Mismatching childNodes vs. VNodes:
NodeList [ a, div.max-w-sm.rounded.overflow-hidden.shadow-lg
]
Array [ {…} ]
vue.runtime.esm.js:6427
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
Working fine without :ssr="{ columns: 2 }"
Example :
<template>
<div class="container">
<div>
<vue-masonry-wall
:items="albums"
:options="options"
:ssr="{ columns: 2 }" // <--- here
>
<template v-slot:default="{ item }">
<album-card-component :album="item" />
</template>
</vue-masonry-wall>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component } from 'nuxt-property-decorator'
import VueMasonryWall from 'vue-masonry-wall'
import Album from '~/models/album'
import AlbumCardComponent from '~/components/AlbumCardComponent.vue'
@Component({
components: { AlbumCardComponent, VueMasonryWall },
})
export default class AlbumsIndex extends Vue {
albums!: Album[]
options = {
width: 300,
padding: {
default: 12,
1: 6,
2: 8,
},
}
async asyncData({ error }): Promise<{ albums: Album[] }> {
const albums = await fetch(`https://somewhere.com/api/albums`)
.then((res) => res.json())
.then((json) => json.data)
.catch(() => {
error({ statusCode: 404, message: 'Album not found' })
})
return { albums }
}
}
</script>
I have this problem too
And i can see the HTML structure in the devtool but data is empty
I have this problem also. If I remove the :ssr
attribute then it renders.
Otherwise, the masonry-wall is 0 height with the template slot not rendered.
Spent a day trying to get this to work and doing research on this problem -- finally stumbled across this issue.
Dear @thanateros, @dolnikov? have you guys found any solution for this issue?
when you pass ssr object to the component at mount hook if condition this.columns.length !== this._columnSize() does not accur redraw method does not get called and this.ready cant be set to true so the opacity of the class="masonry-wall" will be 0 and nothing gets appeared on the client side. the solution is to add an else statement in the mount hook method:
if (this.columns.length !== this._columnSize()) { this.redraw() } else if(!this.ready) this.ready = true;
Same not working properly
using SSR vue-masonry-wall renders an item in full width without columns
Just to confirm...does this work for the latest NuxtJS v2.15.8? I ask because it does not for me. Thanks.
Here's my reproduction link: https://codesandbox.io/s/nuxt-masonrywall-h55wy?file=/components/Tutorial.vue
Just found this ported version of vue-masonry-wall. Works with SSR!
https://vue2-masonry-wall.yeger.eu/
Here is my test as well: https://codesandbox.io/s/yeger-masonry-vue2-v03xv?file=/pages/index.vue
Hi,
I followed the Nuxt SSR you are adding in the README with
:ssr="{columns: 2}"
but nothing got rendered in the page
any advice please?
here are my template code
and i'm providing the data from the asyncData as follow: