vue-grid-responsive

Vue Grid Responsive

Responsive grid system based on Bootstrap for Vue.

• •

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>

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>

Demo Link

Local demo:

git clone https://github.com/andrelmlins/vue-grid-responsive.git
cd vue-grid-responsive
npm && npm run dev

Properties

Component props:

Row Component props

Column Component props

Basic Size

Offset

Hidden Component props

NPM Statistics

Download stats for this NPM package

License

Vue Grid Responsive is open source software licensed as MIT.