Responsive Masonry Layout With SSR And Lazy Load Support - masonry-wall

Install & Download:

# Yarn
$ yarn add vue-masonry-wall
# NPM
$ npm install vue-masonry-wall --save

Description:

Yet another responsive Masonry style layout system for Vue.js applications. Supports server-side rendering and lazy loading.

How to use it:

1. Import the masonry-wall after installation.

import VueMasonryWall from "vue-masonry-wall";

2. Add the vue-masonry-wall component to the template.

<template>
  <section>
    <vue-masonry-wall :items="items" :options="options" @append="append">
      <template v-slot:default="{item}">
        <div class="Item">
          <img :src="item.image"/>
          <div class="Content">
            <h5 class="text-ellipsis-1l">{{item.title}}</h5>
            <p class="text-ellipsis-2l">{{item.content}}</p>
          </div>
        </div>
      </template>
    </vue-masonry-wall>
  </section>
</template>

3. Render a masonry layout on the app.

export default {
  name: "ExampleMasonry",
  components: {VueMasonryWall},
  data() {
    return {
      options: {
        width: 300,
        padding: {
          2: 8,
          default: 12
        },
      },
      items: [
        {
          title: 'Sed non ante non cras amet',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sagittis leo. Vestibulum sit amet metus nec neque dignissim dapibus.',
          image: 'https://picsum.photos/id/1015/600/600'
        },
        {
          title: 'Curabitur sit amet nunc',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id mollis erat. Aliquam erat volutpat. Nunc erat lacus, rhoncus nec.',
          image: 'https://picsum.photos/id/1019/600/700'
        },
        {
          title: 'Proin pharetra, ante metus',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac diam ac ex efficitur posuere. Pellentesque cursus pellentesque risus, non.',
          image: 'https://picsum.photos/id/1039/600/800'
        },
        {
          title: 'Cras pharetra non enim a',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada varius nibh, a malesuada nisi feugiat eget. Aenean convallis semper.',
          image: 'https://picsum.photos/id/1042/600/300'
        },
      ]
    }
  },
  methods: {
    append() {
      // append method
    }
  }
}

4. Default props.

/**
 * Array of items to add into masonry
 */
items: {
  type: Array,
  required: true
},
/**
 * Options to config masonry.
 *
 * {
 *     width: 300,
 *     padding: {
 *         default: 12,
 *         1: 6,
 *         2: 8,
 *     },
 *     throttle: 300
 * }
 */
options: {
  type: Object,
  required: false
},
/**
 * SSR has no clue what is the size of your height of your element or width of the browser.
 * You can however guess based on user-agent: https://github.com/nuxt-community/device-module
 * This param allow you to preload a config for SSR rendering, it will distribute your items into all columns evenly.
 *
 * Once the client is mounted, it will redraw if the config is different from SSR.
 *
 * {
 *     column: 2
 * }
 */
ssr: {
  type: Object,
  required: false
}