Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-bricks with all npm packages installed. Try it out:

var vueBricks = require("vue-bricks")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-bricks v2.0.0


npm Travis Coveralls Github All Releases npm

bricks.js for vue 2.x waterfall component


Thanks for


> yarn add vue-bricks
# or
> npm i vue-bricks -S


global component

// main.js
import Vue from 'vue'
import 'vue-bricks/lib/vueBricks.css'
import VueBricks from 'vue-bricks'


new Vue({
  render: h => h(App)

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'

It's set babel config to resolve, add sourceType: 'unambiguous':

// babel.config.js
module.exports = {
  presets: [
  // here
  sourceType: 'unambiguous'

single component

  <div class="waterfall">
        <template slot-scope="scope">
          <div class="card">
            <img class="card-img-top" :src="scope.item.src" :alt="" :style="{ width: `320px`, height: `${scope.item.height * 320 / scope.item.width}px` }">
            <div class="card-block">
              <h4 class="card-title" :style="">{{ }}</h4>
              <p class="card-text">{{ scope.item.width }} * {{ scope.item.height }}</p>
      <div class="loading" :class="{ active: loading }">

import Bricks from 'vue-bricks'
// or
// import Bricks from 'vue-brick/src/components/bricks.vue'
import dataLoader from './components/loader'

export default {
  components: {
  data () {
    return {
      loading: true,
      waterfallData: [],
      waterfallSizes: [
        { columns: 4, gutter: 20 },
        { mq: '414px', columns: 1, gutter: 10 },
        { mq: '640px', columns: 1, gutter: 80 },
        { mq: '800px', columns: 2, gutter: 80 },
        { mq: '1024px', columns: 3, gutter: 15 },
        { mq: '1280px', columns: 3, gutter: 30 },
        { mq: '1366px', columns: 4, gutter: 15 },
        { mq: '1440px', columns: 4, gutter: 30 },
        { mq: '1980px', columns: 5, gutter: 40 }
  methods: {
    async refresh () {
      document.documentElement.scrollTop = 0
      await this.fetchwaterfallData(true)
      this.$nextTick(() => this.$refs.bricks.pack())
      // or
          .then(() => {
    fetchwaterfallData (isReset) {
      return new Promise(resolve => {
        this.loading = true
          .then(data => {
            if (isReset) {
              this.waterfallData = data
            } else {
    done () {
      this.loading = false
  created () {


dataundefinedArray, It's required
sizesundefinedArray, It's required, An array of objects describing the grid's properties at different breakpoints. reference
packeddata-packedString, An attribute added to the grid items after they're positioned within the grid. If the attribute is not prefixed with data-, it will be added.reference
positiontrueA boolean, defaulting to true, indicating that the grid items should be positioned using the top and left CSS properties. reference
containerwindowwrapper for bricks, the scroller
offset0when scroll to the page bottom near offset, It's trigger reach Event

API / Events

  • pack

    Used to pack all elements within the container.

      <bricks @pack="handlePack" />
  • update

    Used to pack elements without the packed attribute within the container.

      <bricks @update="handleUpdate" />
  • resize(size)

    Used to add or remove the resize event handler. It's recommended that you add the resize handler when you create your instance.

      <bricks @resize="handleResize" />

You can get bricks instance Object to resolve


Project setup

yarn serve


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free