Contents
Description:
A simple and intuitive Bootstrap based responsive grid system for Vue.js which is, compatible with Vue.js version 2 and 3.
How to install and use it?
1. Install the component with npm or yarn.
#npm
npm i [email protected]
#yarn
yarn add [email protected]
2. Import the required components.
import { createApp } from ‘vue’;
import { Row, Column, Hidden } from ‘vue-grid-responsive’;
3. Now, register the components.
const app = createApp(App);
app.component(‘row’, Row);
app.component(‘column’, Column);
app.component(‘hidden’, Hidden);
4. Add the grid system in your template file.
<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>
And, you are done.
The post Bootstrap based responsive grid system for Vue.js appeared first on Lipku.com.