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.
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@6.0.1 --save-dev
npm install sass-loader@10.2.0 --save-dev
# With yarn
yarn add vue vue-mdbootstrap
yarn add node-sass@6.0.1 --dev
yarn add sass-loader@10.2.0 --devThen, 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.
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.min.css" crossorigin="anonymous">
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue-mdbootstrap/dist/vue-mdb.min.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(VueMdb.AxiosPlugin, {baseURL: "http://localhost/<api-url>"});Now, you can use any of Vue MDBootstrap components in your html page.
Notes:
- FontAwesomeIcon and Moment.js already bundled except Moment.js localization.
- All plugins and classes placed under VueMdb namespace. Please refer to documentation.
You can clone the demos from here to see it in action.
Now you have implemented Vue MDBootstrap to your project, and it’s time to write your code. Please refer to each component’s documentation to learn how to use them.
Modern browsers and Internet Explorer 10+.