|
|
|
|
|
<p align="center">
|
|
|
<a href="http://mdbootstrap.com/docs/vue/">
|
|
|
<img width="500" src="https://mdbootstrap.com/img/Marketing/general/logo/huge/mdb-vue.png">
|
|
|
</a>
|
|
|
</p>
|
|
|
|
|
|
<h1 align="center">Vue Bootstrap with Material Design</h1>
|
|
|
|
|
|
<p align="center">
|
|
|
Based on the latest <b>Bootstrap 4</b> and Vue <b>2.6.11</b>.
|
|
|
</p>
|
|
|
<p align="center">
|
|
|
<b>400+</b> material UI elements, <b>600+</b> material icons, <b>74</b> CSS animations, SASS files, templates, tutorials and many more. <b>Free for personal and commercial use.</b>
|
|
|
</p>
|
|
|
|
|
|
<p align="center">
|
|
|
<a href="https://npmcharts.com/compare/mdbvue?minimal=true"><img src="https://img.shields.io/npm/dm/mdbvue.svg" alt="Downloads"></a>
|
|
|
<a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
|
|
|
<a href="https://badge.fury.io/js/mdbvue"><img src="https://badge.fury.io/js/mdbvue.svg" alt="npm"></a>
|
|
|
<a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/vue/&hashtags=vuejs,code,webdesign,bootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"></a>
|
|
|
</p>
|
|
|
|
|
|
<p align="center">
|
|
|
<a href="https://mdbootstrap.com/docs/vue/" target="_blank">
|
|
|
<img width="700" src="https://mdbootstrap.com/img/Marketing/products/vue/mdb-free.jpg" alt="logo">
|
|
|
</a>
|
|
|
</p>
|
|
|
|
|
|
|
|
|
__________
|
|
|
|
|
|
|
|
|
## Table of Contents
|
|
|
|
|
|
* [Other Technologies](#other-technologies)
|
|
|
* [Demo](#demo)
|
|
|
* [Version](#version)
|
|
|
* [Quick start](#quick-start)
|
|
|
* [Supported Browsers](#supported-browsers)
|
|
|
* [Contributing](#contributing)
|
|
|
* [Additional tutorials](#additional-tutorials)
|
|
|
* [PRO verion](#pro-version)
|
|
|
* [Documentation](#documentation)
|
|
|
* [Highlights](#highlights)
|
|
|
* [Useful Links](#useful-links)
|
|
|
* [Social Media](#social-media)
|
|
|
* [Contact](#contact)
|
|
|
|
|
|
|
|
|
# Other Technologies
|
|
|
|
|
|
[<img src="https://mdbootstrap.com/img/Marketing/general/logo/small/angular.png"/>](https://mdbootstrap.com/docs/angular/)[<img src="https://mdbootstrap.com/img/Marketing/general/logo/small/react.png"/>](https://mdbootstrap.com/docs/react/)[<img src="https://mdbootstrap.com/img/Marketing/general/logo/small/jquery.png"/>](https://mdbootstrap.com/docs/vue/)
|
|
|
|
|
|
# Demo
|
|
|
|
|
|
- [Main demo](https://vue.mdbootstrap.com/)
|
|
|
|
|
|
# Version
|
|
|
|
|
|
- MDBVue 6.5.0
|
|
|
- Vue 2.6.11
|
|
|
|
|
|
# Quick start
|
|
|
|
|
|
```
|
|
|
bash
|
|
|
|
|
|
# install dependencies
|
|
|
npm install / yarn
|
|
|
|
|
|
# serve with hot reload at localhost:8080
|
|
|
npm run dev / yarn start
|
|
|
|
|
|
# build for production with minification
|
|
|
npm run build / yarn build
|
|
|
|
|
|
# build for production and view the bundle analyzer report
|
|
|
npm run build --report / yarn build --report
|
|
|
```
|
|
|
|
|
|
# Supported browsers
|
|
|
|
|
|
MDBootstrap supports the **latest, stable releases** of all major browsers and platforms.
|
|
|
|
|
|
Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, MDBootstrap should (in most cases) display and function correctly in these browsers as well.
|
|
|
|
|
|
### Mobile devices
|
|
|
|
|
|
Generally speaking, MDBootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
|
|
|
|
|
|
| | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | Android Browser & WebView | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> Miscrosoft Edge |
|
|
|
|:--------------------:|:---------------------------:|:----------------------------:|:----------------------------:|:----------------------------:|:-------------------------------------------------------------------------:|
|
|
|
| Android | Supported | Supported | N/A | Android v5.0+ supported | Supported |
|
|
|
| iOS | Supported | Supported | Supported | N/A | Supported |
|
|
|
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Supported |
|
|
|
|
|
|
### Desktop browsers
|
|
|
|
|
|
Similarly, the latest versions of most desktop browsers are supported.
|
|
|
|
|
|
| | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> Internet Explorer | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Internet Explorer / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
|
|
|:--------------------:|:-----------------------------:|:------------------------------:|:------------------------------:|:----------------------------:|:-------------------------------------------------------------------------:|:------------------------------:|
|
|
|
| Mac | Supported | Supported | N/A | N/A | Supported | Supported |
|
|
|
| Windows | Supported | Supported | N/A | Supported | Supported | Not supported |
|
|
|
|
|
|
# Contributing
|
|
|
|
|
|
Please read [CONTRIBUTING.md](https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
|
|
|
|
|
|
# Getting started
|
|
|
|
|
|
- [5min Quick Start](https://mdbootstrap.com/docs/vue/getting-started/quick-start/)
|
|
|
|
|
|
# Additional tutorials
|
|
|
|
|
|
- [MDB - Bootstrap tutorial](https://mdbootstrap.com/education/bootstrap/)
|
|
|
|
|
|
- [MDB - Wordpress tutorial](https://mdbootstrap.com/education/wordpress/)
|
|
|
|
|
|
# PRO version
|
|
|
|
|
|
- [Vue Bootstrap with Material Design PRO](https://mdbootstrap.com/products/vue-ui-kit/)
|
|
|
|
|
|
# Documentation
|
|
|
|
|
|
[Huge, detailed documentation avilable online](https://mdbootstrap.com/docs/vue/)
|
|
|
|
|
|
# Highlights:
|
|
|
|
|
|
**Bootstrap 4**
|
|
|
Up-to-date with the latest standards of Bootstrap 4 and all the best it has to offer.
|
|
|
|
|
|
**Detailed documentation**
|
|
|
Intuitive and user-friendly documentation, created with a copy-paste approach.
|
|
|
|
|
|
**No jQuery**
|
|
|
Writing your code with pure Vue is now quicker, easier, and cleaner.
|
|
|
|
|
|
**Cross-browser compatibility**
|
|
|
Works perfectly with Chrome, Firefox, Safari, Opera and Microsoft Edge.
|
|
|
|
|
|
**Frequent updates**
|
|
|
Expect any bugs being fixed in a matter of days.
|
|
|
|
|
|
**Active community**
|
|
|
MDB is broadly used by professionals on multiple levels, who are ready to aid you.
|
|
|
|
|
|
**Useful helpers**
|
|
|
Reduce the frequency of highly repetitive declarations in your CSS.
|
|
|
|
|
|
**Technical support**
|
|
|
Every day we help our users with their issues and problems.
|
|
|
|
|
|
**SASS files**
|
|
|
Thought-out .scss files come in a compile-ready form.
|
|
|
|
|
|
**Flexbox**
|
|
|
Full support of Flexbox layout system lets you forget about alignment issues.
|
|
|
|
|
|
### Support MDB developers
|
|
|
|
|
|
- Star our GitHub repo
|
|
|
- Create pull requests, submit bugs, suggest new features or documentation updates
|
|
|
- Follow us on [Twitter](https://twitter.com/mdbootstrap)
|
|
|
- Like our page on [Facebook](https://www.facebook.com/mdbootstrap)
|
|
|
|
|
|
A big ❤️ **thank you to all our users** ❤️ who are working with us to improve the software. We wouldn't be where we are without you.
|
|
|
|
|
|
# Useful Links
|
|
|
|
|
|
- [Getting started](https://mdbootstrap.com/docs/vue/getting-started/download/)
|
|
|
|
|
|
- [5 min quick start](https://mdbootstrap.com/docs/vue/getting-started/quick-start/)
|
|
|
|
|
|
- [Material Design + Bootstrap Tutorial](https://mdbootstrap.com/education/bootstrap/)
|
|
|
|
|
|
- [Freebies](https://mdbootstrap.com/freebies/)
|
|
|
|
|
|
- [Premium Templates](https://mdbootstrap.com/templates/)
|
|
|
|
|
|
- [Changelog](https://mdbootstrap.com/vue/changelog/)
|
|
|
|
|
|
- [MDB jQuery repo](https://github.com/mdbootstrap/bootstrap-material-design)
|
|
|
|
|
|
- [MDB React repo](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design)
|
|
|
|
|
|
- [MDB Angular repo](https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design)
|
|
|
|
|
|
# Social Media
|
|
|
|
|
|
- [Twitter](https://twitter.com/MDBootstrap)
|
|
|
|
|
|
- [Facebook](https://www.facebook.com/mdbootstrap)
|
|
|
|
|
|
- [Pinterest](https://pl.pinterest.com/mdbootstrap)
|
|
|
|
|
|
- [Google+](https://plus.google.com/u/0/b/10786.1.0883699620484/+Mdbootstrap/posts)
|
|
|
|
|
|
- [Dribbble](https://dribbble.com/mdbootstrap)
|
|
|
|
|
|
- [LinkedIn](https://www.linkedin.com/company/material-design-for-bootstrap)
|
|
|
|
|
|
# Contact
|
|
|
|
|
|
- contact@mdbootstrap.com
|
|
|
|
|
|
|