SSR not working properly with this package

[hadelnasr]

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

<vue-masonry-wall :items="items" :options="{width: 300, padding: 12}" :ssr="{columns: 10}">
  <template v-slot:default="{item}">
    <div class="item">
      <h5>{{item.title}}</h5>
      <p>{{item.content}}</p>
    </div>
  </template>
</vue-masonry-wall>

and i'm providing the data from the asyncData as follow:

async asyncData(context) {
  return {
    items: [
      {title: 'Item 000', content: 'Content'},
      {title: 'Item 1', content: 'Content'},
    ]
  }
},

[fuxingloh]

Hmmm, I can't really see what is wrong here.
Is it possible to include the entire page?

[agravelot]

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>

[dolnikov]

I have this problem too

And i can see the HTML structure in the devtool but data is empty

[thanateros]

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.

[ngochangjelly]

Dear @thanateros, @dolnikov?
have you guys found any solution for this issue?

[mohammad-saadati]

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;

[bsor-dev]

Same not working properly

[creazy231]

using SSR vue-masonry-wall renders an item in full width without columns

[dosstx]

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

[dosstx]

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