Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@keeer/material-components-nuxt

matsp21MIT1.2.0-keeer1

Material Design components for Vue.js

material-components-web, mdc-web, material-design, vue

readme

logo

Material Components Vue

Material Design styled components for Vue.js

Material-components-vue integrates the mdc-web (by google) vanilla components following the simple approach.

https://matsp.github.io/material-components-vue

Development

This project is under active developement but I need any help you can provide. Due to a huge workload in my daily job I'am struggling with upgrading to the newest versions of the upstream project: mdc-web.

Support

If you want to help feel free to submit issues or pull requests. Every information that help to stabilize and improve the library is welcome!

When you want to support me you can buy me a :coffee: here :+1:

Buy Me A Coffee

Features

  • decoupled components
  • implementing just the specs not more or less
  • keep the components as simple as possible
  • keep in sync with changes in the mdc-web repository
  • user friendly component api
  • SSR (Server Side Rendering) support

Documentation

You will find a API documentation for each component in their corresponding component directory:

components/[component]/README.md

Distributions

Name ECMA Minimized
dist/[component]/index.js 5 no
dist/[component]/[component].min.js 5 yes

All versions are provided as UMD modules.

Name Description
dist/[component]/[component].min.css Minified component CSS
dist/[component]/styles.scss Raw SASS styles of mdc-web

changelog

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

1.2.0 (2019-09-25)

1.2.0-alpha.0 (2019-09-25)

⚠ BREAKING CHANGES

  • fab: extended prop no longer in use
  • fab: label and icon become separated component
  • fab: icon slots no longer in use

fix the bug that can not implement an extended FAB with Text label followed by icon

make ripple optional

add snapshots and update docs

  • doc(fab): update demos

Bug Fixes

  • button: fix bug similar to #377 (#382) (24d6a26)
  • card: fix similar bug #377 (#383) (257952b)
  • deps: update dependency material-components-web to v3 (#310) (8bf719c)
  • deps: update dependency material-components-web to v3.1.0 (#356) (328c0a6)
  • deps: update dependency material-components-web to v3.1.1 (#390) (78c5583)
  • deps: update dependency material-components-web to v3.2.0 (#430) (ed24163)
  • dialog: close via v-model (#380) (13895fc), closes #376
  • menu: missing import 'mutationobserver-shim' in test (#399) (e3b5b81)
  • radio: v-model doesn't work correctly (#412) (ed4bb75)
  • ripple: wrong implementation (#368) (df0d8a5)

Features

1.1.0 (2019-07-01)

Bug Fixes

  • eliminate eslint warnings (#241) (1ba6f6a)
  • card: bring back prop primaryAction (#319) (3ad11bc)
  • checkbox: lack of disabled prop (#251) (2fe244f)
  • deps: update dependency material-components-web to v2.3.1 (#271) (07bc3e6)
  • radio: missing watcher for value (#262) (cb6bd2d)
  • snackbar: Check empty actionButtonText (2716a20)
  • snackbar: labelText is empty when using default slot as the label text (#240) (f0ddd6c)
  • tab: v-model not updating (#286) (4863d00)
  • tab-bar: add a built-in scroller if the default slot is not a scroller (#313) (0650e3d), closes #312
  • text-field docs: correcting component usage in readme (#316) (e6d231d)

Features

Tests

1.0.2 (2019-05-14)

1.0.1 (2019-05-14)

1.0.0 (2019-05-14)

Bug Fixes

  • deps: update dependency material-components-web to v2.2.0 (#231) (938ad5c)
  • select: v-model doesn't work with enhanced select (#232) (9a48b88)

Features

1.0.0-alpha.2 (2019-05-02)

Features

  • snackbar: add dismiss button and make dismiss button and action button optional (#214) (a90038e)
  • upgrade material-components-web to v2.0 (#223) (2e5d6d9)

BREAKING CHANGES

  • MENU

"When using MDC List inside MDC Menu tabindex should be set on list root element where role="menu" is assigned."

  • Menu: Implement new setDefaultFocusState() method

The property accepts both integers and strings. The map is (case insensitive): 0 = none 1 = list_root 2 = first_item 3 = last_item

Either one of the values above can be used.

  • Allow passing absolute position for either X or Y axis (not requiring to pass them both)

The setAbsolutePosition method has a default of 0 in case one value is null. Using -1 as the default is not good as it does not allow negative values.

  • Add HoistToBody property

1.0.0-alpha.1 (2019-04-02)

Bug Fixes

  • incomplete rename from 'textfield' to 'text-field' (#206) (2ce1299)
  • lack of mdc-button style for the snackbar action button (#209) (5f31e14)
  • missing disabled prop in list item (#211) (7c013e5)
  • misspelled closed to close on @MDCDrawer:closed event and no closed event emitted after drawer closed (#207) (d46290c)
  • pre-filled text field can not be disabled (#213) (2d55655)
  • update label position when value is added in an empty text field (#212) (3b40325), closes #140
  • wrong payloads in event closed and closing emitted by snackbar (#208) (491f361)

1.0.0-alpha.0 (2019-03-22)

Bug Fixes

  • layout-grid: Wrong phone identifier on layout grid (#157) (eb625e5)
  • shape: Property typo (481fecc)

0.26.1 (2018-08-16)

Bug Fixes

  • textfield: Pass events to inner elements (close #144) (c5479ed)

0.26.0 (2018-08-15)

Bug Fixes

  • line-ripple: Remove potential memory leak (58d297b)
  • notched-outline: Instantiate component (#149) (34e5f55)

Features

  • textfield: Pass events to inner input (close #144) (c9df358)

0.25.1 (2018-07-17)

0.25.0 (2018-07-09)

Features

  • fab: Synchronise with mdc-web (b2cad7f)
  • select: Synchronise with mdc-web (91bc17f)

BREAKING CHANGES

  • select: Renamed slot 'bottomLine' to 'line'.
  • fab: Introduced icon slot and replaced default slot for extended fab label.

0.24.1 (2018-07-01)

0.24.0 (2018-07-01)

Bug Fixes

  • icon-button: Use computed properties for slot toggling (7aeccfa)

Features

0.23.8 (2018-06-29)

Bug Fixes

  • icon-button: Implement instance checks before constructor call (close #132) (da4fe10)
  • menu: Pass event to mdc component (close #131) (ed4ac7e)

0.23.7 (2018-06-25)

Bug Fixes

  • menu: Access vue instance instead of rendered node (#126) (a08936e)
  • tab: Correct conditional rendering (close #129) (5ddd679)

0.23.6 (2018-06-21)

Bug Fixes

  • fab: Improve tagname detection (fbc75f2)

0.23.5 (2018-06-20)

Bug Fixes

  • fab: Only destroy ripple if not undefined (f469db1)

0.23.4 (2018-06-20)

0.23.3 (2018-06-20)

Bug Fixes

  • fab: Disable adding CSS class for SVGs (f8c2118)

0.23.2 (2018-06-19)

0.23.1 (2018-06-14)

Bug Fixes

  • checkbox: Set indeterminate correctly after state change (close #123) (bfd2f89)

0.23.0 (2018-06-13)

Bug Fixes

  • docs: Fix import issue from node_modules (c68e957)

Features

  • icon-button: Add new package (26771e8)

BREAKING CHANGES

  • icon-button: IconToggle has been moved to IconButton. Please refer to the readme for changes and how to update.

0.22.5 (2018-05-28)

Bug Fixes

0.22.4 (2018-05-28)

Bug Fixes

  • babel: Add workaround for config resolution (0c401a4)

0.22.3 (2018-05-28)

Bug Fixes

  • webpack: Build with webpack target web (250a241)

0.22.2 (2018-05-28)

0.22.1 (2018-05-27)

Bug Fixes

  • drawer: Add missing mixin import statements (732ace2)

0.22.0 (2018-05-27)

Bug Fixes

  • floating-label): fix(floating-label: Explicit bind attributes (close #112) (969a06f)
  • webpack: Change target to web (2ca9705)

Features

  • form-field: Set radio and checkbox component to input property (close #105) (6e2eadd)

0.21.1 (2018-05-23)

0.21.0 (2018-05-23)

Bug Fixes

  • list: Correct component names for instantiation (close #111) (f980270)
  • list: Correct CSS class for ListItem (close #110) (404ea70)
  • theme: Add surface color to theming mixin. (e2879c1)

Features

  • build: Add SSR support for library (close #107) (cfd1070)

0.20.3 (2018-05-20)

Bug Fixes

0.20.2 (2018-05-20)

Bug Fixes

  • travis: Not correct docs directory (57793b5)

0.20.1 (2018-05-20)

0.20.0 (2018-05-20)

Bug Fixes

  • button: Set ripple on class changes (4ecd765)
  • chips: Only render checkmark on filter chips (37f675d)
  • fab: Set ripple on class changes (f049ab3)
  • list: Set ripple on class changes (b921ede)

Features

  • chips: Provide mdcChipSet for child chips (23734b6)
  • radio: Map non prop attributes to the inner input element (4472ccf)

BREAKING CHANGES

  • list: Removed interactive prop, ripple effect is now default.
  • fab: Removed interactive prop, ripple effect is now default.
  • button: Removed interactive prop, ripple effect is now default.

0.19.2 (2018-05-14)

Bug Fixes

  • card: Add ripple effect on card if primaryAction (closes #106) (e908e47)
  • card: Move media slot out of content (c3c8c85)
  • checkbox: Make indeterminate a reactive prop (844576d)
  • radio: Watch checked prop (closes #104) (238000f)

0.19.1 (2018-05-05)

Bug Fixes

  • build: Explicitly use babel-loader (c090124)
  • button: Make interactive a reactive prop (9fd1456)
  • layout-grid: Correct validator function (a764c0c)
  • radio: Correct two-way binding with value (6e6b80a)

0.19.0 (2018-04-24)

  • feat(typography):Update mdc-web to v0.35.0 (#96) (7ddf97a), closes #96

Bug Fixes

  • demo: Adapt typography changes (f0559bf)

Code Refactoring

  • select: Replace Label & BottomLine with FloatingLabel & (43fe087), closes #96

Features

  • button: Synchronise with mdc-web (#96) (b90c911)
  • card: Synchronise with mdc-web (#96) (c69d1a3)
  • chips: Synchronise with mdc-web (#96) (ff93da9)
  • shape: Add shape component (f280390)
  • textfield: Synchronise with mdc-web (#96) (fd8ecee)
  • theme: Synchronise with mdc-web (#96) (ae60fb8)
  • top-app-bar: Synchronise with mdc-web (#96) (e8d5e5a)

BREAKING CHANGES

  • select: Use FloatingLabel and LineRipple instead of the removed SelectLabel and SelectBottomLine.
  • Removed Display and Title, added Overline. Headline has now a level between 1 and 6.
  • theme: Checkout the docs reference for the new mdc-theme CSS classes.
  • card: Stroked prop is renamed to outlined.
  • button: Stroked prop is renamed to outlined.

0.18.0 (2018-04-23)

Bug Fixes

Features

  • button: Use MutationObserver for reactive slot updates (#92) (b115d8f)
  • card: Use MutationObserver for reactive slot updates (#92) (b24651c)
  • chip: Use MutationObserver for reactive slot updates (#92) (cfbf749)
  • dialog: Use MutationObserver for reactive slot updates (#92) (d6278b5)
  • fab: Use MutationObserver for reactive slot updates (#92) (3668145)
  • grid-list: Use MutationObserver for reactive slot updates (#92) (36f83b1)
  • image-list: Use MutationObserver for reactive slot updates (#92) (4dc7e4b)
  • list: Use MutationObserver for reactive slot updates (#92) (64c382d)
  • list: Use MutationObserver for reactive slot updates (#92) (7804dff)
  • menu: Use MutationObserver for reactive slot updates (#92) (7085946)
  • ripple: Use MutationObserver for reactive slot updates (#92) (4ac021b)
  • ripple: Use MutationObserver for reactive slot updates (#92) (4cea647)
  • tabs: Use MutationObserver for reactive slot updates (#92) (26b33c3)
  • textfield: Use MutationObserver for reactive slot updates (#92) (e1221c5)
  • top-app-bar: Use MutationObserver for reactive slot updates (#92) (9a13f7e)

0.17.0 (2018-04-19)

Bug Fixes

  • demo: Fix grid-cell span in SelectView (e9bfa71)

Code Refactoring

  • dialog: Implement two-way binding for open prop (#83) (25ca33b)
  • linear-progress: Use open prop for showing and hiding linear (1db78b1)
  • menu: Implement two-way binding for open prop (#83) (f1d20a2)
  • snackbar: Implement two-way binding for open prop (#83) (828edff)

Features

BREAKING CHANGES

  • linear-progress: Public component methods for open / close no longer exist. Please change your templates to use v-model instead.
  • dialog: Public component methods for open / close no longer exist. Please change your templates to use v-model instead.
  • snackbar: Public component methods for open / close no longer exist. Please change your templates to use v-model instead.
  • menu: Public component methods for open / close no longer exist. Please change your templates to use v-model instead.

0.16.1 (2018-04-13)

0.16.0 (2018-04-08)

Code Refactoring

  • drawer: Implement two-way binding for open prop (#83) (fe246f2)

Features

  • notched-outline: Synchronise with mdc-web v0.34.1 (add notched prop) (e19b0e0)
  • select: Synchronise with mdc-web v0.34.1 (rewrite of component) (a2c94ac)
  • theme: Synchronise with mdc-web v0.34.1 (remove tonal variants) (ad34970)
  • top-app-bar: Synchronise with mdc-web v0.34.1 (add dense style) (e85c266)
  • typography: Synchronise with mdc-web v0.34.1 (remove adjustMargin prop) (c333244)

BREAKING CHANGES

  • select: The select component now use a native html select, so please update your templates as discribed in the docs.
  • typography: Please remove adjustMargin prop in your templates.
  • theme: Don't use tone variants e.g. secondary-light anymore.
  • drawer: The toggle methods no longer exist, please use v-model instead.

0.15.1 (2018-03-29)

Bug Fixes

  • build: Downgrade node-sass to fix ripple effect (closes #87) (c724a7c)

0.15.0 (2018-03-27)

Bug Fixes

  • demo: Fix icon-toggle reference link (4e27023)
  • image-list: Fix prop type in ImageListItem (b826193)
  • image-list: Fix prop validator functions (1d10870)
  • image-list: Fix type comparison & use image slot in ImageListItem (f0a7a1b)

Features

  • chip: Synchronise with mdc-web v0.33.0 (add checkmark) (af17558)
  • demo: Add image-list demo (a9fad5e)
  • demo: Synchronise with mdc-web v0.33.0 (remove compact style) (d82594b)
  • image-list: Synchronise with mdc-web v0.33.0 (add component) (92168d6)
  • notched-outline: Synchronise with mdc-web v0.33.0 (add component) (bbfa8eb)
  • top-app-bar: Synchronise with mdc-web v0.33.0 (add prominent style) (1e79429)

0.14.1 (2018-03-23)

Features

  • demo: Improve demo load speed by preloading resources (2059845)

0.14.0 (2018-03-14)

Features

  • textfield: Change HTML Tag (05a5c73)
  • Add mdc-theme classes mixin (close #67) (79dc321)

BREAKING CHANGES

  • textfield: Please upgrade your textfields from <m-text-field> to<m-textfield>

0.13.1 (2018-03-09)

Bug Fixes

  • top-app-bar: Remove validator & add attribute around default slot (53f9e80)

Features

  • demo: Add top-app-bar demo (c29f8e9)

0.13.0 (2018-03-07)

Features

  • chips: Synchronise with mdc-web v0.32.0 (add choice and filter) (224b2e8)
  • demo: Add chips demo (7026e5f)
  • floating-label: Synchronise with mdc-web v0.32.0 (add component) (c2a13f5)
  • top-app-bar: Synchronise with mdc-web v0.32.0 (add component) (ab379a4)

0.12.19 (2018-03-07)

Bug Fixes

  • build: Migrate library build tor new CSS plugin (e202bce)

0.12.18 (2018-03-06)

0.12.17 (2018-03-06)

0.12.16 (2018-03-05)

Bug Fixes

  • demo: Temporary use webpack's development mode for demos (a569885)

0.12.15 (2018-03-05)

Bug Fixes

  • build: Disable splitting all chunks (db922f5)

0.12.14 (2018-03-05)

Bug Fixes

  • build: Fix split optimization (close #79) (e21e57a)

0.12.13 (2018-03-05)

Bug Fixes

  • build: Fix CSS extract plugin (close #78) (ec44f3c)

0.12.12 (2018-03-05)

0.12.11 (2018-03-05)

0.12.10 (2018-03-05)

0.12.9 (2018-02-28)

Bug Fixes

0.12.8 (2018-02-28)

Bug Fixes

  • demo: Use postcss for demos (0557508)

0.12.7 (2018-02-28)

0.12.6 (2018-02-28)

Bug Fixes

  • demo: Provide Promise poylfill via ProvidePlugin (47661c3)

0.12.5 (2018-02-28)

Bug Fixes

  • demo: Removed dynamic import function (closes #73) (d1207a1)

0.12.4 (2018-02-28)

Bug Fixes

  • demo: Tried to use Promise before polyfill (c61b5a3)

0.12.3 (2018-02-28)

Bug Fixes

  • demo: Add promise polyfill if needed (be8ec36)

0.12.2 (2018-02-26)

Bug Fixes

  • webpack: Fix CSS distribution name (55a06ac)

0.12.1 (2018-02-26)

Chores

  • Upgrade Babel (#70) & publish ES5 with new transformations (closes #71) (a944056)

BREAKING CHANGES

  • The distribution names changed, please update your build process!

0.12.0 (2018-02-24)

Documentation

  • README: Add necessary information about new distributions. (d507485)

BREAKING CHANGES

  • README: There is no overall bundle anymore - please import only components you need, not more...

0.11.1 (2018-02-20)

Bug Fixes

  • README: Update mdc-web version (cac1af9)

0.11.0 (2018-02-20)

Features

  • card: Synchronise with mdc-web v0.31.0 (add primary action) (ac51092)
  • chip: Synchronise with mdc-web v0.31.0 (add icons) (d8793a4)
  • demo: Add list component demo (049bfbc)

0.10.1 (2018-02-19)

0.10.0 (2018-02-18)

Bug Fixes

  • package: update normalize.css to version 8.0.0 (81f15b0)

Features

  • demo: Removed dark-theme switch (9a174c8)
  • demo: Replaced bottom-line with line-ripple in the textfield demo (773864a)
  • drawer: Decoupled drawer component for better customization (closes #60) (c384a7a)

BREAKING CHANGES

  • drawer: There are new sub-components - have a look at the docs.

0.9.0 (2018-02-07)

Features

  • card: Synchronise with mdc-web v0.30.0 (c73d745)
  • card: Synchronise with mdc-web v0.30.0 (add stroked prop) (c384f99)
  • checkbox: Synchronise with mdc-web v0.30.0 (ad92849)
  • chips: Synchronise with mdc-web v0.30.0 (add chip component) (dd6a08a)
  • line-ripple: Synchronise with mdc-web v0.30.0 (add line-ripple component) (bdd1f39)
  • menu: Synchronise with mdc-web v0.30.0 (7a83af9)
  • menu: Synchronise with mdc-web v0.30.0 (8fea9c8)
  • ripple: Add missing method (66f995f)
  • select: Synchronise with mdc-web v0.30.0 (e8c3d59)
  • textfield: Synchronise with mdc-web v0.30.0 (629df48)
  • theme: Synchronise with mdc-web v0.30.0 (1ef3026)

0.8.0 (2018-01-30)

Features

  • icon: Decouple a few icon implementations in other components where possible (closes #51) (d4a30d4)

0.7.3 (2018-01-29)

0.7.2 (2018-01-29)

Bug Fixes

  • webpack: Fixes wrong module names (6b6d559)

0.7.1 (2018-01-29)

Bug Fixes

  • README: Correct distributions table (e4f9cc7)

0.7.0 (2018-01-29)

Features

  • Add SASS style import for all mdc-web components (closes #53) (16d6f2d)

0.6.0 (2018-01-25)

Bug Fixes

  • drawer: Only render slot when content is inserted (7249010)
  • menu: Add role and tabindex (d00a8f8)

Features

  • demo: Add select demo (046827e)
  • drawer: Add drawer toolbar spacer (4feaa6c)
  • list: Synchronise component with mdc-web (8c49711)
  • select: Synchronise component with mdc-web v0.29.0 (f65d2b5)
  • text-field: Synchronise with mdc-web (closes #47) (7eb23d3)

0.5.1 (2018-01-18)

0.5.0 (2018-01-13)

Bug Fixes

  • select: Fixes to Select component (b99e76f)

Features

0.4.0 (2017-12-16)

Features

  • demos: Added demo for linear progress component (584fba5)

0.3.0 (2017-12-15)

Bug Fixes

  • babel: Incorrect preset name (be65935)
  • demo: False commit (bc238a8)
  • demos: CSS optimizations (9f33cd1)
  • Import babel-polyfill (0e802ba)
  • demos: Exchange drawer item components (18ff382)
  • switch: Throw 'change' instead of 'changed' event (6e309b1)
  • theme: Fix CSS class (4d4700e)
  • theme: Removed SASS import (7d33078)
  • webpack: Add polyfills commons chunk plugin entry (ff09b94)
  • webpack: Commons chunk plugin order (21d2e5f)
  • webpack: Remove polyfill bundle (56d3504)
  • webpack: Reorder common chunk plugin calls (d885ede)

Features

  • demos: Add dark theme switch (c95ffcc)
  • demos: Add darkTheme state (ee06275)
  • fab: Add exited state (fixes #27) (44eda66)
  • theme: Add theme raw component (d38249d)
  • theme: Allow custom styles for theme (86b620b)
  • Introduce mutation types (837d8b8)

0.2.0 (2017-11-28)

Features

0.1.0 (2017-11-20)

Features

0.0.51 (2017-11-15)

Bug Fixes

  • build environment set false (141c142)
  • linearProgress: watched props set wrong (7c8b8ef)
  • snackbar: options property not set in show() (d4e906f)