Vue MDBootstrap
A Vue.js UI component library that can leverage Bootstrap or TailwindCSS to build beautiful web apps.
Vue MDBootstrap is a collection of UI components for Vue 3 and built according to the Google Material Design 3 specifications. This component library is built in the spirit of Vue 3 framework and can leverage Bootstrap v5 or TailwindCSS v4 CSS framework to build beautiful web-apps.
Whether you are building an amazing Single Page Application (SPA) or common web page, you have the power at your fingertips. You don't have to be a great programmer and have excellent UI design skills. Just use Vue MDBootstrap. It's easy to use and most of the components you need are already there.
Vue MDBootstrap can be used to build Single Page Application (SPA) by using module bundler or built common web page by using resources from the CDN.
- Vue.js
v3.xis required,v3.5.xis recommended - Bootstrap
v5.xis optional,v5.3.xis recommended - TailwindCSS
v4.xis optional,v4.2.xis recommended - Vue Router is optional, and is required for building SPA using module bundler
- Pinia is optional, and is required for building SPA using module bundler
- Vuelidate is optional, and is required for forms validation
If you are building a Single Page Application, then you can use module bundler such as
Vite, Vue Cli or
Webpack to build and jump-start your project.
And use yarn or npm to get the latest version of Vue.js
and Vue MDBootstrap. We assume you have created your project using
Vite + Vue.
If not, please read the
manual first.
# With npm
npm install vue-mdbootstrap --save
# With yarn
yarn add vue-mdbootstrapCreate Vue application and mount at #app entry point.
// file: main.ts
// import global function to register the components and create Vue application
import { createVueMdb } from "vue-mdbootstrap";
// Import the main page template
import App from '@/App.vue';
// Import router navigation,
// read vue-router manual on how to setup the navigation
import router from '@/router';
// import core components css stylesheet
import "vue-mdbootstrap/styles";
// import theme css stylesheet
import 'vue-mdbootstrap/theme-light';
// main code start here...
createVueMdb(App).use(router).mount('#app');Now, everything is registered and you are ready to go. Please note, the provided CSS only handles
component styling. You still need Bootstrap 5 or TailwindCSS 4 to handle page
responsiveness and to quickly style your web pages. Use code below in the <head> section of
your HTML to load the Bootstrap CSS framework.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"/>You can get the latest version of Vue MDBootstrap directly from
unpkg or jsdelivr.
Then use the js and CSS files in the <head> section or your HTML to get started.
Code below is an example on how to create HTML page using Vue MDBootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"/>
<link href="https://cdn.jsdelivr.net/npm/vue-mdbootstrap@2/dist/bundle-core.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/vue-mdbootstrap@2/dist/theme-light.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-mdbootstrap@2/dist/vue-mdb.umd.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="app" class="container">
<h3 class="mt-4">Contextual Buttons</h3>
<bs-card class="mt-4">
<bs-card-body>
<div class="flex flex-wrap md-gap-3">
<bs-button @click="count++">Click me</bs-button>
<bs-button color="primary" @click="count++">Click me</bs-button>
<bs-button color="secondary" @click="count++">Click me</bs-button>
<bs-button color="success" @click="count++">Click me</bs-button>
<bs-button color="danger" @click="count++">Click me</bs-button>
<bs-button color="warning" @click="count++">Click me</bs-button>
<bs-button color="info" @click="count++">Click me</bs-button>
</div>
</bs-card-body>
<bs-card-footer class="font-weight-semibold">Count: {{ count }}</bs-card-footer>
</bs-card>
</div>
<script>
const { ref } = Vue;
const { createVueMdb } = VueMdb;
const app = createVueMdb({
setup() {
const count = ref(0);
return { count };
}
});
app.mount('#app');
</script>
</body>
</html> For full documentation, please visit Our Website.
You can clone the GitHub repository below and run it by your self to see it in action.
- vue3-mdb-example - A web-apps that show component usage examples.
- vue3-mdb-starter - A starter kit project template that leverages the Bootstrap v5 CSS framework.
- vue3-mdb-starter-tw - A starter kit project template that leverages the TailwindCSS v4 CSS framework.
All major modern browsers.