Bootstrap4 Material Design Components for Vue.js

by Vue.js Examples

Vue MDBootstrap

Vue MDBootstrap is a collection of Vue components and built according to the Google Material Design specs. They can be used to built Single Page Application (SPA) by using module bundler or built common web page by using the resources from the CDN.

These components were build in the spirit of Vue framework, and utilize Bootstrap 4 css framework. Long ago, I use them on all my VueJs projects. Now, I decide to publish these components and hope it will be useful to anyone who wants to use it as an alternative of many Vue components out there.

View Demo View Github

How To Use

Using Module Bundlers

If you are building Single Page Application and using module bundlers like
Webpack, Vue Cli or
Symfony Encore,
you may prefer to directly include the package into your project. To get started,
use yarn or npm to get the latest version of Vue.js, and Vue MDBootstrap.

# With npm
npm install vue vue-mdbootstrap --save
npm install node-sass --save-dev

# With yarn
yarn add vue vue-mdbootstrap
yarn add node-sass --dev

Then, register Vue MDBootstrap in your app entry point.

// main.js
import Vue from "vue";
import VueMdb, { AxiosPlugin } from "vue-mdbootstrap";

// Default requirement
Vue.use(VueMdb);
// Optionally, install the MDBootstrap Axios plugin
// only requires if using BsGrid, BsTreeGrid, BsModel, BsStore, BsTreeStore or needs to perform HTTP Request
Vue.use(AxiosPlugin);

Now, you are ready to go. You can use any of Vue MDBootstrap components without
using import statement again. Please note, these components still need css from
Bootstrap4 css framework.

Using CDN

If you aren't building Single Page Application and not using module bundlers, and
your goals is building common web page to display on the web browser, grab the
supplied css and js from the dist folder. Or you can get the latest
version of the resource from unpkg.com/vue-mdbootstrap
and use the js and css files on your html <head> section on the page to get started.

Code below is an example how to load and initialize the components.

<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/vue-mdbootstrap/dist/vue-mdb.css" crossorigin="anonymous">
<script src="https://unpkg.com/vue-mdbootstrap/dist/vue-mdb.bundle.js" crossorigin="anonymous"></script>

If you are using BsGrid, BsTreeGrid, BsModel, BsStore, BsTreeStore and/or
need to perform HTTP Request, you can use example code below in your javascript to
initialize MDBootstrap Axios plugin.

Vue.use(AxiosPlugin, {baseURL: "http://localhost/<api-url>"});

Now, you can use any of Vue MDBootstrap components in your html page.

GitHub