VueJS Examples

Best VueJS Grid System Libraries

A curated list of the best Grid System libraries for VueJS.

1. vue-grid-responsive

Responsive grid system based on Bootstrap for Vue.

Step 1: Installation

NPM

vue 2.0

npm i vue-grid-responsive
// OR
yarn add vue-grid-responsive

vue 3.0

npm i vue-grid-responsive@next
// OR
yarn add vue-grid-responsive@next

CDN

vue 2.0

<script src="https://unpkg.com/vue-grid-responsive"></script>

vue 3.0

<script src="https://unpkg.com/vue-grid-responsive@next"></script>

Manual

You can also download and import it manually

<script src="/vue-grid-responsive/dist/vue-grid-reponsive.min.js"></script>

Step 2: Module import

vue 2.0

import Vue from 'vue';
import { Row, Column, Hidden } from 'vue-grid-responsive';

Vue.component('row', Row);
Vue.component('column', Column);
Vue.component('hidden', Hidden);

vue 3.0

import { createApp } from 'vue';
import { Row, Column, Hidden } from 'vue-grid-responsive';

const app = createApp(App);

app.component('row', Row);
app.component('column', Column);
app.component('hidden', Hidden);

Examples

An example of how to use the library:

<template>
  <row container :gutter="12">
    <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
    <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
    <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
    <column :xs="12" :md="4" :lg="3"> xs=12 md=4 lg=3 </column>
  </row>
</template>

An example how to use offset in addition with a columns:

<template>
  <row container :gutter="12">
    <column :md="8" :mdOffset="2" :lg="6" :lgOffset="3"> </column>
  </row>
</template>

Using the hidden component:

<template>
  <div>
    <hidden :xs="true"> hidden xs </hidden>
    <hidden :md="true"> hidden md </hidden>
    <hidden :xl="true"> hidden xl </hidden>
  </div>
</template>

Read more


2. vue-js-grid

This an experiment and not a production-ready plugin.

Step 1: Install

npm install --save vue-js-grid

Step 2: Import

import Vue from 'vue'
import Grid from 'vue-js-grid'

Vue.use(Grid)

Step 3: Usage

data () {
  return {
    items: [
      'a',
      'b',
      'c'
    ]
}
<grid
  :draggable="true"
  :sortable="true"
  :items="items"
  :height="100"
  :width="100">
  <template slot="cell" scope="props">
    <div>{{props.item}}</div>
  </template>
</grid>

Read more


3. vue-grid-layout

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout

Here are its features:

  • Draggable widgets
  • Resizable widgets
  • Static widgets
  • Bounds checking for dragging and resizing
  • Widgets may be added or removed without rebuilding grid
  • Layout can be serialized and restored
  • Automatic RTL support (resizing not working with RTL on 2.2.0)
  • Responsive

Read more