Vue MDBootstrap
Vue MDBootstrap is a collection of VueJs 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 VueJs 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.
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 [email protected] --save-dev
npm install [email protected] --save-dev
# With yarn
yarn add vue vue-mdbootstrap
yarn add [email protected] --dev
yarn add [email protected] --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/[email protected]/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/[email protected]/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.
Demos
You can clone the demos from here to see it in action.
Start coding
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.
Browser Support
Modern browsers and Internet Explorer 10+.
9.7k Jan 5, 2023
428 Jan 4, 2023
902 Jan 4, 2023
8.3k Dec 27, 2022
359 Jan 3, 2023
0 May 11, 2022
540 Jan 5, 2023
873 Jan 3, 2023
102 Dec 20, 2022
40 Jul 10, 2022
1.9k Dec 25, 2022
17.6k Jan 4, 2023
74 Dec 14, 2022
36.2k Dec 30, 2022
167 Dec 29, 2022
188 Jan 1, 2023
511 Dec 29, 2022
229 Dec 27, 2022