Responsive masonry layout with SSR support for Vue.js – vue-masonry-wall


Category: Layout Vue.js | August 28, 2021
Author: DerYeger
Official Page: Go to website
Last Update: August 25, 2021
License: MIT

vuejs masonry layout

Description:

A lightweight and responsive masonry layout with SSR support for Vue.js which is, fully responsive with configurable padding and reactive means, reacts on property changes. It does supports RTL and LTR layouts.

You may also like:

How to install and use it?

1. Install the layout component with npm or yarn.

#npm
npm install @yeger/vue-masonry-wall

#yarn
yarn add @yeger/vue-masonry-wall

2. Import the required components.

import { createApp } from 'vue'
import MasonryWall from '@yeger/vue-masonry-wall'

3. Now, register the component.

const app = createApp()

app.use(MasonryWall)

4. Now, create a basic masonry layout in your application.

<template>
  <masonry-wall :items="items" :ssr-columns="1" :column-width="300" :padding="16">
    <template #default="{ item, index }">
      <div style="height: 100px">
        <h1>{{ item.title }}</h1>
        <span>{{ item.description }}</span>
      </div>
    </template>
  </masonry-wall>
</template>

5. Created array of items.

export default {
  data() {
    return {
      items: [
        { title: 'First', description: 'The first item.' },
        { title: 'Second', description: 'The second item.'},
      ]
    }
  }
}