A Vue.js UI component library that can leverage Bootstrap or TailwindCSS to build beautiful web apps.
---
## Introduction
**Vue MDBootstrap** is a collection of UI components for **Vue 3** and built
according to the [Google Material Design 3](https://m3.material.io/)
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.
## Getting Started
**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.
### Requirements
- [Vue.js](https://vuejs.org) `v3.x` is required, `v3.5.x` is recommended
- [Bootstrap](https://getbootstrap.com) `v5.x` is optional, `v5.3.x` is recommended
- [TailwindCSS](https://tailwindcss.com) `v4.x` is optional, `v4.2.x` is recommended
- [Vue Router](https://router.vuejs.org/) is optional, and is required for building SPA using module bundler
- [Pinia](https://pinia.vuejs.org/) is optional, and is required for building SPA using module bundler
- [Vuelidate](https://vuelidate-next.netlify.app/) is optional, and is required for forms validation
## Quick Setup
### Using Module Bundler
If you are building a Single Page Application, then you can use module bundler such as
[Vite](https://vitejs.dev/), [Vue Cli](https://cli.vuejs.org/) or
[Webpack](https://webpack.js.org/) 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](https://vuejs.org/guide/quick-start.html#creating-a-vue-application).
If not, please read the
[manual](https://vuejs.org/guide/quick-start.html#creating-a-vue-application) first.
```bash
# With npm
npm install vue-mdbootstrap --save
# With yarn
yarn add vue-mdbootstrap
```
Create Vue application and mount at `#app` entry point.
```ts
// 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 `` section of
your HTML to load the Bootstrap CSS framework.
```html
```
### Using CDN Resources
You can get the latest version of Vue MDBootstrap directly from
[unpkg](https://unpkg.com/) or [jsdelivr](https://www.jsdelivr.com/package/npm/vue-mdbootstrap).
Then use the js and CSS files in the `` section or your HTML to get started.
Code below is an example on how to create HTML page using Vue MDBootstrap.
```html
Contextual Buttons
Click meClick meClick meClick meClick meClick meClick me
Count: {{ count }}
```
## Documentation
For full documentation, please visit [Our Website](https://ahmadfajar.github.io/).
## Starter Kit and Examples
You can clone the GitHub repository below and run it by your self to see it in action.
1. [vue3-mdb-example](https://github.com/ahmadfajar/vue3-mdb-example) - A web-apps that
show component usage examples.
2. [vue3-mdb-starter](https://github.com/ahmadfajar/vue3-mdb-starter) - A starter kit
project template that leverages the Bootstrap v5 CSS framework.
3. [vue3-mdb-starter-tw](https://github.com/ahmadfajar/vue3-mdb-starter-tw) - A starter kit
project template that leverages the TailwindCSS v4 CSS framework.
## Browser Support
All major modern browsers.
