MDB Vue 6.5.017.02.2020
MDB Vue 6.5.0 comes with several improvements on existing components & four new custom directives
- v-mdb-dummy - custom directive for creating simple placeholders for images, text and more
- v-mdb-waves - custom directive which adds on-click ripple effect to any element.
- v-mdb-mutate - custom directive which allows for easy implementation of Mutation Observer API
- v-mdb-intersect - custom directive which calls a method when an object is visible in a viewport
- v-mdb-scrollspy - new option
asyncfor displaying data fetched asynchronously
- Datatables - a new field in a column object which allows formatting data based on a current value
- Datatables - scrollY option
- Carousel - icons customization
- Stepper - new property
- Select - now emits additional event
@searchwith value of a search input
- Navbar - new Boolean property
containeradds a container wrapper inside a navbar
- Sidenav - Logo alt property & keyboard accessibility
- Autocomplete - clear button positioning
MDB Vue 6.4.003.02.2020
In this release, we focused primarily on custom directives - as a result, the MDB Vue 6.4.0 comes with built-in solutions for handling touch events, click events outside an element, keyboard shortcuts and more.
- v-mdb-touch -
custom directivefor touch events (pinch, long-tap, double-tap, pan, swipe)
- v-mdb-infinite-scroll -
custom directivewhich triggers callback every time a user reaches an end of a page/container
- v-mdb-scroll-lock -
custom directivewhich temporarily disables scrolling the body element
- v-mdb-resize -
custom directiveallowing to call a method each time user resizes the window
- v-mdb-hotkey -
custom directivefor attaching keyboard shortcuts to element/document
- v-mdb-clipboard -
custom directivewhich allows copying the given value to the user's clipboard
- v-mdb-lazy-load -
custom directivewhich loads media only when they are visible on the screen
- v-mdb-click-outside -
custom directivefor detecting click event outside the element
- v-mdb-input-mask -
custom directivewhich adds a mask to the input field
- Tabs - watcher for the
- Charts - datalabels plugin
- DatePicker - Input field (read-only)
- TimePicker - keyboard accessibility
- Updated SASS/CSS - synchronized with MDB v.4.12.0 & Bootstrap 4.4.1
- BtnFixed - calculating the height of an element
MDB Vue 6.3.020.01.2020
In MDB Vue 6.3.0 we have added several new features such as
v-model for Switch, Slider & TimePicker, improved SSR integration and more.
- MDB Nuxt - nuxt module
- Select - secondary text option,
- v-scroll-spy - new directive
- Autocomplete -
- DatePicker -
- TimePicker - opening with a custom element, v-model,
- Switch - two way data binding
- Slider -
- Date + TimePicker - example how to open one picker after the other
- Color combinations - new page with color combinations examples
- Select - initial position and animation
- TimePicker- animation
- SSR integration
- Updated SASS/CSS - synchronized with MDB v.4.11.0
MDB Vue 6.2.023.12.2019
The last MDB Vue release in 2019 comes with a handful of new features (Autocomplete, List Group, Datatable, Pills and more), improvements on existing ones (f.e. Date Picker, Dropdown) & several bugfixes (mainly regarding row selection in Datatables).
- Textarea - new examples: colourful, shadow
- Autocomplete - two-way data binding, validation, disabled mode, a custom filtering function, @search event useful for API calls in async examples
- Datatable - sorting enabled only in chosen columns, checkboxes & colour customization in tables with selectable rows
- ListGroup - new examples: icons, flush & more
- Timeline - custom content - slot for custom content
- Google Maps - new examples
- Breadcrumb - new examples
- Pills - new examples
- Autocomplete - Popper.js based dropdown with material scroll and adjustable height (display property)
- Datatable - selected row stays selected after @blur event
- Tabs - keep alive & alternate option for naming slots
- Dropdown - Popper.js implementation
- Date Picker - new options such as disabled dates, disabled past/future, disabled range of date, disabled from and to an exact date, access from outside
- Test coverage
- Updated SASS/CSS - synchronized with MDB v.4.10.1
MDB Vue 18.104.22.168.2019
In MDB Vue 6.1.1 we have focused on bug fixes and improvements on existing components, such as Datatable, Icon and Select.
- Icon - new mixin for better performance in all components using icons
- Select - name and required attributes
- Datatable - props for controlling pagination & button colour
- Quick start updates - CDN, SCSS and Plugins installation instructions
- Select - colourful option works now with the entire colour palette (select & multiselect)
- Updated SASS/CSS - synchronized with MDB v.4.10.0
MDB Vue 6.1.025.11.2019
MDB Vue 6.1.0 comes with several improvements of WOW animation, Lightbox, Slider, Accordion, DatePicker and some new features, such as one item per time Carousel, support for the router-link in Streched link, multi-range Slider, autofocus attribute in Input or gallery property in Lightbox.
- Lightbox - gallery layout created automatically with
galleryproperty (new data structure for
imgsprop allows to set full-size images, thumbnails and caption with just one array), fullscreen mode and touch events for mobile screens
- Multi-item Carousel - One item per time, improved animations
- Stretched link - support for the router-link
- Stepper - step icon for
- Input - autofocus attribute
- Multi-range Slider - new option with multiple handlers
- WOW animation - content is now visible after page load (SEO reasons) and just after first scroll it become hidden
- DatePicker - updated documentation for customization
- Accordion - new examples in overview
- Lightbox - dragging, transitions
- Slider - reactivity (watcher for the value change)
- Updated SASS/CSS - synchronized with MDB v.4.9.0
MDB Vue 22.214.171.124.2019
In MDB Vue 6.0.1 we focused primarily on fixing bugs and improving our documentation. Among components affected by those changes are mdbInput, mdbSelect, mdbAlert and animateOnScroll directive.
- mdbSelect - the selectAll functionality and the redundant padding (dropdown).
- mdbInput - the radio input bug and the styling issue in validated input with
- mdbTimeline - the CSS styling (left padding issue)
- animateOnScroll - the multiple class names bug
- mdbAlert - the enter/leave animation class bug
- Touch directive - we included the essential imports for the touch events
MDB Vue 6.0.028.10.2019
In this major update, we migrated our library to the Vue CLI 4 version. In addition, we included some innovative installation modes, such as tree shaking, global registration or scss editable option. Setup is now a child's play thanks to the MDB CLI Plugin that will guide you through the entire installation process.
New installation modes:
- Tree shaking - using this mode will significantly reduce the size of js output files. Worth considering if you plan to import only a few of our components.
- Registering all components - new option for global components imports in the application. Keep in mind that this type of import will significantly increase the size of js output files.
- SCSS editable mode - this new mode let you write custom scss code, as well as update our scss core files or variables. Keep in mind that editable styling mode will only work after installing
sass-loaderdependencies. This will be done automatically in basic installation mode.
Library core updates:
- MDB Vue Installation Plugin - it will guide you through the entire installation process, including templates selection, styling options, fonts and icons import. All steps are comprehensively described in our guide.
- Roboto font removed from the core - this font is still recommended in MDB Vue UI Kit, however due to the need to limit the size of output files, installation is now voluntary. We advise to import fonts from the official Google Fonts Catalog.
- Font Awesome 5 optional installation - if you want to import FA5 icons just choose
yesduring installation process. If you choose
nothe size of output font files will decrease significantly, but you won't be able to use icons in your project.
- mdbCarousel (syntax change) - all additional components (mdbCarouselItem, mdbCarouselCaption, mdbMultiCarousel) are now contained within one component (free and pro version). For easier use and better performance, carousel items can now be rendered based on either an array of objects or named slots. The component supports the v-model directive.
- mdbStepper (syntax change) - new layouts and customization options have been added, as well as the supports the v-model directive. The mdbStep is now replaced by an array of items (free version) or named slots (pro version).
- mdbSelect - we improved keyboard navigation and accessibility. The dropdown uses now Popper.js and updates its position on the scroll and resize events. You can enable scrolling longer content with the
scrollproperty and customize the number of visible items.
- Updated SASS/CSS - synchronized with MDB v.4.8.11
MDB Vue 5.8.330.09.2019
In MDB Vue 5.8.3 we focused on the bug fixes and minor features.
- Input -
focusbug while using
- Tooltip - styling for material version
- NavbarBrand - binding attributes to the inner component
- Footer - the new property
marginTopfor setting custom margin
- Rating - the property
disabledwhich allows to display static rating
- Updated SASS/CSS - synchronized with MDB v.4.8.10
MDB Vue 5.8.216.09.2019
In MDB Vue 5.8.2 we fixed several bugs and added new features to the existing components.
- Datatable - the
focusproperty and the
@selectRowevent for selecting rows and modifing data
- Input - the
- Icons - support for the duotone icons (FA premium users)
- Tooltip - the new property
maxWidthfor setting custom max-width of the component
- Popover - the new property
maxWidthfor setting custom max-width of the component
- Updated SASS/CSS - synchronized with MDB v.4.8.9
MDB Vue 5.8.119.08.2019
MDB Vue 5.8.1 comes with several bug fixes and improvements on existing features.
- Sliding cards are now based on the
v-ifdirective instead of
- Treeview Item - entire component is now clickable
- Updated SASS/CSS - synchronized with MDB v.4.8.8
MDB Vue 5.8.005.08.2019
MDB Vue 5.8.0 includes improvements on the form elements' visual consistency, new options for existing components and fix for the v-model bug in DatePicker.
- Treeview - new colorful version
- Chat - the
messageproperty in the
mdbChatMessagenow renders strings into HTML content with the
- Hamburger menu - custom icons instead of a default toggler
- Datatable - new properties for altering default text
- Time Picker - new events (
@blur) and properties such as
- Date Picker - new events (
@blur) and properties such as
- Select - new events (
@blur) and properties such as
- Inputs - new events (
@blur) and properties for inputs with
- Visual consistency for the form elements
- Updated SASS/CSS - synchronized with MDB v.4.8.7
MDB Vue 5.7.022.07.2019
Version 5.7.0 introduces several new components (Timeline, Treeview, Rating and SlidingCard) as well as new functionalities for Dropdown, Lightbox, Datepicker and Stepper
- Timeline - two new components
mdb-timeline-itemallowing you to easily build responsive, adjustable timelines
- Card animations - example with animated social buttons and
mdb-sliding-cardcomponent which nested within
mdb-cardwill slide over its content
- Rating - customizable component for rating and leaving feedback
- Treeview - new components for displaying hierarchical item list
- Multilevel dropdown - property
multiLevelis now available for all MDBVue users
- Lightbox -
captionsprops and support for touch events such as pinch zoom and double tap
- Datepicker - props necessary for validation, such as
- Stepper - validation preventing user from going to the next step
- 30% of unit test coverage
- Updated SASS/CSS - synchronized with MDB v.4.8.5
- Dropdown - form example
MDB Vue 5.6.008.07.2019
Version 5.6.0 comes with two new components (Chat, Shopping Card) and some important fixes including Double Navigation refactor, Navbar toggler update or new Table Editable features.
- Table Editable - added new features according to the reported issue
- Double navigation - toggler prop allowing you to disable collapsing
- Navbar - fixed mobile view issues
- Select - keyboard access
- Dropdown toggling bugfix
- Updated NavItem component width icon props
- Updated SASS/CSS - synchronized with MDB v.4.8.3
MDB Vue 5.5.124.06.2019
Version 5.5.1 introduces new masonry layouts, select animations and improved multilevel megamenu.
- Masonry - new options for images and responsive layouts.
- Time Picker - short guide to keyboard navigation.
- Date Picker - short guide to keyboard navigation.
- Megamenu - clickable multilevel version
- Select - has new animations.
MDB Vue 5.5.010.06.2019
This release introduces new file inputs, cards and improvements on keyboard accessibility.
- File input - customize file input's apperance with new properties:
lg sm rounded outline icon floatingand many more.
- Advanced cards - we introduced new map, calendar and panels cards.
- Select - new example with data from API.
- Installation - easily add MDBVue to an exsisting project.
MDB Vue 5.4.127.05.2019
This release introduces several improvements on existing components and documentation - such as a support for
@click events in mdb-nav-link and a solution for a perfect_scrollbar issue.
- Nav item - is now supporting
- Input -
v-modelworks now with an
- Datatable scroll - Horizontal scroll examples in demo app have been updated.
- Carousel - fading animation works now correctly.
- We've added
postcss-importto the package in order to fix a perfect_scrollbar issue.
- Modals Forms - code snippets in the documentation have been checked and updated.
- Background image - documentation in the demo app has been improved.
- Lightbox - the code has been slightly refactored to improve performance.
- Datatable filter - a new page has been added to the demo app presenting this feature.
- Updated SASS/CSS - synchronized with MDB v.4.8.1
MDB Vue 5.4.013.05.2019
This release contains new features such as animated captions or material tooltips as well as improvements on previous versions of tabs, radio inputs, waves and many more.
- Animated captions in carousel - animate captions by adding
animation="fadeIn"property. All acceptable classes can be found here
- New material tooltips are now available for our Pro users
- Mega menu - new options, multi level & hoverable
- HTML in datatables - new feature allowing to render HTML string in a cell
- Refreshing data in datatables - add property
refreshto display a button triggering data reload from API. For systematically reloading datatable add a
reactiveproperty and specify reloading frequency with a
- Inputs - improved checkboxes and radios for v-model compatibility
- Tabs component now can contain custom HTML - use our slots named exactly as a value of a
textparameter of each link. New feature allows you to customize transitions as well with
- Media image - add property
circleto change shape of the image
- Waves in fixed navbar are now fully automatic (no need to add
- Navbar SSR compatibility fix
- Select - improved for dynamic data changes
- Updated SASS/CSS - synchronized with MDB v.4.8.0
MDB Vue 5.3.029.04.2019
In this release we have improved existing features such as filtering data in datatables, as well as introduced new components and options: slim sidenav, toast notifications, outline inputs and many more.
- Slim sidenav - new version of the sidebar is now available
- Stretched Link - new feature allowing you to tranform entire element into clickable link
- Bootstrap notifications - new component for creating interactive notifications
- Input - supports now several new features: outline inputs with validation, character count and animated inputs
- Positioning - new mixin for quickly applied margins and paddings
- Masonry - new tool for creating layouts
- Datepicker - is now fully supporting
v-modeland uses smooth transitions
- Datatables - we improved filtering data and introduced default value for undefined columns and rows
- Stepper - now supports usage of the
- Multiselect - save button is now optional
- Perfect Scrollbar -is updated and now works correctly for SSR
- Updated SASS/CSS - synchronized with MDB v.4.7.7
MDB Vue 5.2.015.04.2019
This release contains new features such as custom validation, preloading script and multi-item carousel components as well as improvements on previous versions of select, inputs, animations and many more.
- Charts - three new charts:
mdb-horizontal-bar-chart mdb-bubble-chart mdb-scatter-chartare now available for your data vizualization. We also improved our charts components for better responsiveness.
- Preloading script - display one of our spinners while your page is loading and adjust it's apperance according to your needs.
- Multi-item carousel - new mdb component provides flexible options for better mobile display.
- Perfect scrollbars for tables and images
- Inputs - we introcuded custom validation and validation for material inputs.
- Text - new features such as
.text-break .text-reset .text-decoration-noneare now available.
- Borders - use one of the following:
.rounded-lg .rounded-smto control border radius.
- Animations on scroll -
v-animateOnScrolldirective now offers additional features, enabling users to specify time delay and position on the screen.
- Datatables -
:display="3"allows to control number of pages visible in the pagination. The new properties -
next="" start="" previous="" end=""enable replacing default buttons with a custom text, while
arrowsproperty replaces all of them with mdb-icons.
- List group horizontal - add
horizontalproperty to your list group in order to display it horizontaly and one of following properties:
sm md lg xlto specify breakpoints for more responsive display.
- Modal with a scrollbar - add
scrollableproperty and scroll through long contents with a scrollbar.
- Both Select and Inputs components work now with
v-modeldirective and have new
- Select is now supporting a reset option.
- Dropdown item - received a router-link functionality.
- Updated SASS/CSS - synchronized with MDB v.4.7.6
MDB Vue 5.1.201.04.2019
This version contains some crucial updates related to modal transitions, file input reset or dropdown toggler props extension.
- Modals -
v-ifdirective is now replaced by
showproperty to fix modals open animation.
- File Input is now able to reset on user demand.
- Select - options are now indexed.
- Sidenav - new property for styling the component.
- Dropdown toggler is able to get all
mdb-buttonprops. There is now a possiblity to add icon, enlarge or make a gradient.
- Datatables - data is reactive to improve API connections.
- Intros Sections - new animation effects together with new scroll effects.
- Date picker and Time picker refactor.
- All code snippets in documentation are now updated to avoid errors while importing components.
- Dependencies update (Vue 2.6.10 included).
- Updated SASS/CSS - synchronized with MDB v.4.7.5.
MDB Vue 5.1.104.03.2019
This patch release brings minor improvements to some components' usability and the docs.
- Popovers and Tooltips - now the components offer a better, shorter and higher-level syntax involving slots - No need to build the markup with explicit CSS classes within! While it stays backward-compatible, the docs swapped for the newer syntax.
- Numeric input - finally, the component's default feel is material; add the
basicto have it bootstrappish. In case the task at hand does not require sophisticated numeric input features like limiters or step size, you can even go for a regular
- Button - now there is a way to easier style the button text! Instead of using clumsy CSS classes, just pick the color and pass it to the
textprop, like so:
<mdb-btn color="primary" text="secondary">...
MDB Vue 5.1.004.02.2019
This Vue package contains a series of new features such as Spinners, Mobile-friendly Carousel, E-commerce or Blog Comopnents and many others.
- Loader / spinner - simple animations that are used to keep visitors entertained while the page is still loading
- Input Group - used for collecting data entered by users
- Mobile - touch-based interactions with mobile devices
- Blog & E-commerce set of components
- Sections demonastration page - plenty of predefined sections dedicated for various website
- Advanced section demo page
- Waves effect - demonstration how to add waves to any element
MDB Vue 5.0.021.01.2019
The necessary update including many long-awaited improvements.
- Parallax - a performant implementation of a an interesting visual effect
- mdbIcon got a long awaited update to FontAwesome 5!
- Navbar navigation - generally improved through simplification and new features like
- the `newTab` prop for mdbNavItem, and ability to serve both as an outisde link (
href="...") and router link (
- mdbNavbarNav now it gracefully speads items with space around, while props like
lefthelp to position the children accordingly.
- mdbNavbarBrand can finally serve as a router link etc...
- the `newTab` prop for mdbNavItem, and ability to serve both as an outisde link (
- Modals finally got an exended documentation on their Events, Styles, Forms and other valuable Examples & tempaltes
- Starting from this update on,
MDBVuelibrary will be following the semantic versioning notation, compliant with best Node ecosystem practices.
MDB Vue 4.10.107.01.2019
In this update you can find new Extended Cards or Tabs free. We also added a few impovements to the demo app and fixed Progress bars data range.
- Extended cards - useful for displaying miscellaneous content build of different elements with characteristic shadows, depth and hover effects
- Tabs - added default version of this component inside the free package
- Fixed Progress bars data range
- Popover click event fix
- Brought order to categories in app's demo pages
- Updated modal component prefixes in documentation pages
MDB Vue 4.10.020.12.2018
This Vue package brings improvements of Progress bars, as well as brand new Tabs, Pills or SideNav components. In addition, we took care of input's dynamic value changes and fixed some critical bugs reported by the GitHub users community.
- Refactor of Progress Bars that significantly simplifies implementation
- Tabs and Pills components - creating simple tabs is now child's play
- New SideNav components were born. Thanks to them, the code for side navigation is now much shorter
- Fixed issue with accessing one modal from another modal's body
- Updated Input component - v-model is now available and existing events are improved. All this to enable dynamic value changes regarding to GitHub users issue.
- Tab Content transition is now hidden inside component (no need to add it manually)
- Updated SASS/CSS - synchronized with MDB v.4.5.16
- Updated all components prefixes inside package and documentation pages
MDB Vue 4.9.010.12.2018
This update contains two minor, yet breaking changes.
- mdbSelect got totally refactor: now, instead of manual labour, it accepts data arrays.
- What has been known as Alerts have been turned into Notifications. API reflects this change
- What has been know as Bootstrap Alerts has regained its rightful place among Components section
- mdbSelect has been refactored, allowing it to take in dynamically generated data arrays & other improvemens
- Updated SASS/CSS - synchronized with MDB v.4.5.15
MDB Vue 126.96.36.199.2018
New MDB Vue PRO package contains now
mdbvue dependency inside. There will be no need to download it from our gitlab repo anymore.
- Time Picker 24 hours format fix
- Navbar collapse target search update
- Updated SASS/CSS - synchronized with MDB v.4.5.13
- PRO package installation -
mdbvuedependency is now delivered inside zip archive instead of gitlab link
- Links update to new syntax
- Huge documentation update
MDB Vue 188.8.131.52.2018
MDB Vue 4.8.1 brings huge amount of new components and some important improvements.
- Background Image
- Carousel with lightbox
- Google Maps
- Hamburger Menu
- Mega Menu
- Modal Templates & Examples
- Updated SASS/CSS - synchronized with MDB v.4.5.12
- Added filter option to datatables
- Added a possibility of using
v-forloop in Select component
- Button now emits native 'click' event
- Modal hidden event fix
- Carousel now accepts `indicatorStyle` and `indicatorClass` props used for more direct control over automatically generated CarouselIndicators looks and feels
- Added a possibility of using
directionprop for modal animation
MDB Vue 4.8.008.10.2018
This update introduces Alerts and brings many improvements, mainly to Modals API.
- Accordion component has been rewritten from scratch to host its logic inside
- Badge component color is defined entirely through props with no default color imposition
MDB Vue 4.7.024.09.2018
This update brings many improvements in the existing package, some new components and also webpack upgrade to version 4.
- Updated SASS/CSS - synchronized with MDB v.4.5.10
- Updated Vue to version 2.5.17
- Updated Webpack to version 4.19.1
- Removed bootstrap-vue from dependencies
- Datatables warning fix
- Carousel fade effect
- Changed tags with :is attribute inside all components
MDB Vue 4.6.010.09.2018
With this version we updated inputs and added some new methods. Also time picker has been upgraded, data tables got some new functionalities and we expanded our documentation for those components.
- Updated SASS/CSS - synchronized with MDB v.4.5.9
- Radio button
- Time Picker
In the above inputs, we improoved inner logic and gave you new methods to handle inputs state changes.
- Navbar scrolling behaviour
- Navbar Brand placement
- Table cells wrapping adjust
- Waves inside inputs
MDB Vue 4.5.120.08.2018
MDB Vue 4.5.1 brings zip packages improvements.
Zip file is now delivered as a pre-configured Vue CLI tooling with our demonstration page and components imported straight from npm or gitlab as a dependency. Thanks to this, it's easy now to update our package without having to manually overwrite files.
- MDB update to 4.5.8
MDB Vue 4.5.030.07.2018
With this version we updated syntax for carousels, collapse, dropdowns and selects. Everything to make our components more friendly and requiring less code to initiate.
- Navbars (Navbar Brand)
- E-commerce Section (Products v.5)
- Testimonials Section
In the above examples, we moved the logic of components (functions, constructors) to their interiors.
- Form validation
- Image Overlays Card
- Table Additional
- Table Editable
- Table Pagination
- Table Responsive
- Table Scroll
- Table Search
- Table Sort
- MDB update to 4.5.7
MDB Vue 4.4.116.07.2018
This time we improved styles for better compatibility with Bootstrap 4.1.1
- Updated Bootstrap to 4.1.1 version and added missed mixins
- Updated MDB to 4.5.6
MDB Vue 4.4.002.07.2018
With this update we've made MDB Vue even better
- Blog section v.4
- Cascading cards
- Classic tabs
- Ecommerce components
- Product sections
- Flipping cards
- Testimonial cards
- Numeric input
- Updated MDB to 4.5.5
MDB Vue 4.3.004.06.2018
Another huge update comes with new features
We also created MDB Vue Admin Dashboard Free
- Blog section
- Contact section
- E-commerce section
- Features section
- Intros section
- Projects section
- Social buttons
- Social section
- Team section
- Testimonials section
- Integration with Heroku
- Col component
MDB Vue 4.2.007.05.2018
This update has been shipped with a lot of new features known from MDB jQuery
- Charts Pro
- Default Bootstrap's Inputs
- More variations of Modals
- Carousels Pro
- Classic Tabs
- Double Navigation
- More versions of Buttons
- Sticky Content
- Range input
- Updated project dependencies
MDB Vue 4.1.003.04.2018
It's just an small update which provides integration with the latest version of MDB
- NPM repository
- scss files
- Updated to Bootstrap 4.0.0 (stable version)
- Updated to MDB Vue 4.5.0
- Build tools