Vue-Masonry-Wall package: How to use with NuxtJS2 and SSR?

user_2420614 0
Viewed 198

I am trying to use vue-masonry-wall in my NuxtJS (v2.15.7) app to give it a masonry layout. According to the docs, the vue-masonry-wall package is "SSR friendly". It states to simply add :ssr="{columns: 2}" to masonry so that during SSR, it will be loaded in 2 columns.

I tried this in my code (codesandbox here). But, during SSR, nothing is loaded.

Anyone got any idea on what is happening and why I can't see any of the items? It works fine in client-mode.

Code example:

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

One option is to run it just on the client side, so:

1- if loaded as plugin, globally: name the plugin file ending with ".client", for instance: 'vue-masonry-wall.client.js'

2- if used as module, you can wrap it with the tag.

user_53360990
Related