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>
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
| Prop | Default | Type | Description |
|---|---|---|---|
| gutter | - | number | Grid spacing in the container |
| columns | 12 | number | Setting columns count in the container |
Column Component props
| Prop | Default | Type | Description |
|---|---|---|---|
| xs | - | number | Size in extra small screen |
| sm | - | number | Size in small screen |
| md | - | number | Size in medium screen |
| lg | - | number | Size in large screen |
| xl | - | number | Size in extra large screen |
Hidden Component props
| Prop | Default | Type | Description |
|---|---|---|---|
| xs | - | boolean | Hidden in extra small size |
| sm | - | boolean | Hidden in small size |
| md | - | boolean | Hidden in medium size |
| lg | - | boolean | Hidden in large size |
| xl | - | boolean | Hidden in extra large size |
NPM Statistics
Download stats for this NPM package
License
Vue Grid Responsive is open source software licensed as MIT.
87 Dec 20, 2021
0 Feb 22, 2022
936 Dec 23, 2022
1.4k Jan 1, 2023
139 Dec 23, 2022
172 Aug 17, 2022
247 Dec 23, 2022
13 Oct 3, 2020
44 Dec 23, 2022
7 Sep 13, 2021
11 Sep 6, 2020
6k Jan 4, 2023
42 Nov 24, 2022
83 Dec 23, 2022
0 Aug 26, 2020