Reusable Component For Responsive Grid Of Cards In Quasar Using Colcade

This reusable Vue component will help you easily add a responsive grid of cards to your Quasar app using Colcade.

I’ve recently fell in love with Quasar, it’s an awesome javascript framework that lets your build hybrid iOS and Android apps as well as PWAs using Vue.

Being a long time fan of Bootstrap, I liked that Quasar follows a lot of Bootstrap conventions for padding, columns, etc. They also have a larger suite of controls than the Ionic Framework including a nice timeline and messages component.

Unfortunately I found their solutions for handling a responsive grid of cards to be overly complicated and a bit fragile. So I built my own reusable component using Colcade to make it easy to add it anywhere in my app.

Add Colcade

First add Colcade to your package.json.

npm install colcade

Register Plugin

Next register Colcade with Vue using Quasar’s boot functionality.

import VueColcade from 'vue-colcade';
export default async ({ Vue }) => {
  Vue.use(VueColcade);
}

Add Component