vuematerial / vue-material

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.

Material Design for Vue.js

Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs

Build well-designed apps that can fit on every screen with support to all modern Web Browsers with dynamic themes, components on demand and all with an ease-to-use API

Demo and Documentation

Documentation & demos

Examples

Installation and Usage

Install Vue Material through npm or yarn

npm install vue-material --save
yarn add vue-material

* Others package managers like JSPM and Bower are not supported yet.

Import or require Vue and Vue Material in your code:

import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'

Vue.use(VueMaterial)

Or use individual components:

import Vue from 'vue'
import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'

Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)

Alternatively you can download and reference the script and the stylesheet in your HTML:

<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>

Optionally import Roboto font & Material Icons from Google CDN:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">

Changelog

Changelog

Questions

If you have any questions, ideas or you want to discuss with Vue Material community, use Discord to join us.

Contributing

Please make sure to read the Contributing Guide before making a pull request.

Browser Support

Vue Material supports all modern browsers.

May work in other browsers but it's untested.

Become a part of the Vue Material community

This project exists thanks to all the people who contribute

Sponsors & Backers

Thank you to all our backers! 🙏 [Become a backer]

Credits and Thanks

Vue Material does not run under the umbrella of any company or anything like that. It is an independent project created by Marcos Moura in his spare time, which has become one of the most used UI Libraries for Vue.js. The development is active and we are working hard to release great things for you.

• elviskang for donating the npm package name!
• Bruno Castro for the awesome Vue Material Logo.
• Supported by Creative Tim

License

MIT

vue-material's Issues

Checkbox events only pass true/false

I've been trying pretty much everything I can think of in order to listen to checkbox change events and set my VueX store accordingly

vuejs/vue-rx#20

Please play nice and send the original $event along as well. I only get true or false.
Otherwise my only option is to watch the entire checkbox value collection:

https://laracasts.com/discuss/channels/vue/checkbox-events

Or maybe I'm not binding correctly, it's a jungle trying to find the right way... most docs only show the templating, not how to bind to underlying models.

    <md-checkbox 
      v-for="choice in prompt.choices" 
      :name="prompt.name"
      :id="prompt.name"
      @input="updateChoice(e, $event)"
      @change="updateChoice" 
      class="md-primary" 
      v-model="choice.value">{{ choice.label }}</md-checkbox>

Am I binding my v-model correctly here? v-model="choice.value"
If I try binding to an Array I'm told it must be a String or Boolean. So here I'm binding directly on the incoming Object of the form: {label: 'xyc', value: false}.

My only other option seems to be to watch on the entire prompt.choices object for changes!?

export default {
  props: ['prompt'],
  data () {
    return {
    }
  },

methods: {
    // $event x is always just null :( 
    updateChoice (e, x) {
      console.log(e, x)
  }
}
}

Test

md-input not reactive when initial value empty

The md-inputs do not acquire the value of the v-model if their initial value is empty. Example:

In template:

...
<input v-model="foo">

<md-input-container>
  <label>Label</label>
  <md-input type="text" v-model="foo" required></md-input>
</md-input-container>
...

In code:

...
data() {
  return {
    foo: null
  };
},

created() {
  setTimeout(() => {
    this.foo = 'bar'
  }, 2000);
}
...

The simple input will update it's value after 2 secs but the md-input will remain empty.

This does not happen when foo has any value with length (not null nor empty string).

Select component popup shows behind other components

<md-toolbar>
    <div class="md-title">My App</div>
    <div class="field-group">
      <md-input-container>
        <label for="movie">Movie</label>
        <md-select name="movie" id="movie">
          <md-option value="Fight Club">Fight Club</md-option>
          <md-option value="Godfather II">Godfather II</md-option>
          <md-option value="Godfather III">Godfather III</md-option>
          <md-option value="Godfather">Godfather</md-option>
        </md-select>
      </md-input-container>
    </div>
  </md-toolbar>
  <md-toolbar>
    <div class="md-title">My App</div>
    <div class="field-group">
      <md-input-container>
        <label for="movie2">Movie</label>
        <md-select name="movie2" id="movie2">
          <md-option value="Fight Club">Fight Club</md-option>
          <md-option value="Godfather II">Godfather II</md-option>
          <md-option value="Godfather III">Godfather III</md-option>
          <md-option value="Godfather">Godfather</md-option>
        </md-select>
      </md-input-container>
    </div>
  </md-toolbar>

the select with id movie is mounted behind the second toolbar.
That is actually expected since it was declared first, so to solve it i'd expected that moving the select to after the toolbar would solve it, but it doesn't.
this happens: Missing input/select/textarea inside md-input-container, since obviously i move it out of the input container element....

please implement date picker

I've looked at a lot of vue-material they are either old and not compatible with Vue@2 or incomplete and an inconsistent. i like the aim for this package

Vue Material is lightweight framework built exactly according to the Material Design specs.

I would love to see date and time picker implemented as well

API Docs

Describe the API of all components.

md-select displaying selected text (rather than value)

Hey Marcos,

This is more of a question than an issue. I am using the SELECT component, but unlike the example you have in your docs (https://marcosmoura.github.io/vue-material/#/components/select) my value attribute for the items is different from the item text. However, the control seems to display the selected value rather than the text once an item is selected. Is there a way to display the text instead?

Attached is the screenshot of some sample code.

And here is what my screen looks like after I selected an item with Name "One"

I would prefer if it displayed the Name ("One") rather than the Value ("1"), as it does now.

Once again, thank you for the awesome library!

Demo is Down

Hey, it looks like the Demo is down.

buttons in docs not displayed in firefox 49 and mobile

Both on local dev server and in https://marcosmoura.github.io/vue-material/#/components/button
don't work in firefox desktop and also Firefox mobile. Chrome is fine on both platforms

[q] how to show (overflow) menu programatically?

[q] how to show (overflow) menu programatically?
i want to show a dropdown-like overflow menu when a button is clicked. how can i do this with vue material?

thanks

md-textarea with maxlength not writable

Setting maxlength in md-textarea resets whatever it is typed when binded to non initialized data. Example:

<md-textarea v-model="foo.description" maxlength="255"></md-textarea>

data() {
  return {
    foo: {}
  }
}

Anything typed in the textarea is deleted within the next milliseconds, the problem dissapears when the attribute "maxlength" is removed.

On the other side, if you initialize the value it lets you write beyond the maxlength

Laravel elixir: Module build failed: SyntaxError: 'with' in strict mode

I didi the following procedure using Vue2 and a fresh Laravel 5.3 install

npm install --save vue-material

In my js entry file (assets/js/app.js)

import Vue from 'vue'
import VueMaterial from 'vue-material'

Vue.use(VueMaterial);
Vue.material.theme.register('default', {
    primary: 'cyan',
    accent: 'pink'
});

const app = new Vue({
    el: '#app',
)}

In my css entry file (assets/css/app.scss)

@import "node_modules/vue-material/dist/vue-material.css";

In my gulpfile

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');

elixir(mix => {
    mix.sass('app.scss')
        .webpack('app.js');
});

But I get the following error

Error: ./~/vue-material/dist/vue-material.js
│Module build failed: SyntaxError: 'with' in strict mode (8:13503)

Snackbars and toasts

Snackbars provide brief feedback about an operation through a message at the bottom of the screen.

Specs for Snackbars

right sidenav always showing

http://codepen.io/nothinggift/pen/BQovGZ

you can scroll horizontally to see it

[core] Keyboard navigation

• Improve button focus
• Add focusable classes to components

https://marcosmoura.github.io/vue-material/#/components/avatar code examples swaped

large and normal classes are in the wrong code example box

Data Table

Data tables display sets of raw data. They usually appear in desktop enterprise products.

Specs for Data Tables

Error: Vue.use(VueMaterial)

Hello,

I'm evaluating framework alternatives, and wanted to test vue, and came across this repo which is the one I liked the most.

In the process of making a cordova app, I made a small test, just one page, referenced vue worked fine. Click on button and hello world, But when I tried to add vue-material like: Vue.use(VueMaterial) I got: plugin.apply is not a function

I'm not familiar with vue, so I have no idea what happened here.

Any ideas?

Cheers

md-select bug

I am using v0.3 and I have a problem with md-select component.

When I use the md-select component I getting an error like these

vue.js?3de6:2611 [Vue warn]: Error when rendering component <md-input-container>: warn @ vue.js?3de6:2611Vue._render @ vue.js?3de6:2243(anonymous function) @ vue.js?3de6:1695get @ vue.js?3de6:740run @ vue.js?3de6:809flushSchedulerQueue @ vue.js?3de6:627nextTickHandler @ vue.js?3de6:405
vue.js?3de6:2252 Uncaught TypeError: Cannot read property 'constructor' of null
    at VueComponent.hasValue (eval at <anonymous> (http://localhost:8080/dist/build.js:1152:1), <anonymous>:6:27402)
    at Watcher.get (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:740:27)
    at Watcher.evaluate (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:848:21)
    at VueComponent.computedGetter [as hasValue] (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:1309:15)
    at VueComponent.classes (eval at <anonymous> (http://localhost:8080/dist/build.js:1152:1), <anonymous>:6:27609)
    at Watcher.get (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:740:27)
    at Watcher.evaluate (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:848:21)
    at Proxy.computedGetter (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:1309:15)
    at Proxy.render (eval at <anonymous> (http://localhost:8080/dist/build.js:1152:1), <anonymous>:9:3280)
    at VueComponent.Vue._render (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:2240:22)

A few docs quirks

A couple of quirks in vue-material docs, perhaps it's ok to list them here for starters:

• https://marcosmoura.github.io/vue-material/#/components/button
  • Click any of the leftmost buttons labeled "default", and the two buttons with .md-primary switch their disabled state Working as intended, there's example code that is not visible in the "code" tab.
  • Perhaps needs a key, or some other modification
• https://marcosmoura.github.io/vue-material/#/components/list (and other pages)
  • Avatars are loaded from https://placeimg.com/ which is slow I guess, often I don't see avatars until interacted with the page
• https://marcosmoura.github.io/vue-material/#/components/tabs
  • Scroll to bottom and click "Disabled", the tab loses its content and cannot be brought back
• https://marcosmoura.github.io/vue-material/#/components/select
  • "Set Pulp Fiction" button works only if you haven't selected any movie yet, and the button is a bit mysterious Fixed.
  • "Groups & Multiple" has an empty array below it, seems like something should be listed there. Fixed.
• https://marcosmoura.github.io/vue-material/#/components/table
  • Sort doesn't work yet, and all rows in the first example have equal values so sort wouldn't make any difference Works ok, there's just not code for this in the examples yet.
  • Should filtering, searching and pagination work already? Works ok, there's just not code for this in the examples yet.
• https://marcosmoura.github.io/vue-material/#/getting-started and https://marcosmoura.github.io/vue-material/#/ui-elements/typography
  • It is quite easy to scroll the page in mobile so that the layout is broken, for example by scrolling past the bottom and a white bar appears.
  • Also switching between all pages has an unnecessary fading in/out, which jumps these pages on load.
• Mobile
  • Using cards on all pages makes the site feel very crammed in mobile. Could you use some other dividers by default so that components would be more representative how they are used in mobile?
  • Also a possibility to disable ripple animations for a more speedier feel would be a plus. You could also consider using fastclick.js or similar to make buttons feel snappy on mobile.

[Edited to comment out a couple of fixed bugs. Thanks!]

Datepicker ?

Hello friend, plans for the DatePicker?
how you're going to documentation?

Fix Doc

Hello Mark, blz
Thanks for excellent job in package!

I tried to register the components separately and how was documentation.
Vue.use(VueMaterial.MdCore); //Required to boot vue material
Then the components that need, e.g.
Vue.use(VueMaterial.MdToolbar);

But I looked at your code and the property only worked, at least in my project, with property starting with a lowercase letter, for example.
Vue.use(VueMaterial.mdCore);
Vue.use(VueMaterial.mdToolbar);

It may be a problem with the name resolution in my project, but it will be what happens to anyone else?
If so, just change the doc, thanks

Or, if you are normal for most, please disregard

md-input bug

I have an problem with md-input component.

I am getting an error like these when I use md-input with type number

VM1121:2252 Uncaught TypeError: Cannot read property 'constructor' of null(…)hasValue @ VM1123:6get @ VM1121:740evaluate @ VM1121:848computedGetter @ VM1121:1309classes @ VM1123:6get @ VM1121:740evaluate @ VM1121:848computedGetter @ VM1121:1309render @ VM1123:9Vue._render @ VM1121:2240(anonymous function) @ VM1121:1695get @ VM1121:740run @ VM1121:809flushSchedulerQueue @ VM1121:627nextTickHandler @ VM1121:405
5VM1121:2611 [Vue warn]: Invalid prop: type check failed for prop "value". Expected String, got Number. 
(found in component <md-input>)

initialization error

import Vue from 'vue'
import VueMaterial from 'vue-material'

Vue.use(VueMaterial)

Vue.material.theme.register('default', {
    primary: 'cyan',
    accent: 'pink'
})

gives you the following error

vue-material.js?ec92:6Uncaught TypeError: Cannot set property 'default' of undefined
register @ vue-material.js?ec92:6
(anonymous function) @ main.js?3479:10
(anonymous function) @ app.js:1230
__webpack_require__ @ app.js:556
fn @ app.js:87
(anonymous function) @ app.js:587
__webpack_require__ @ app.js:556
(anonymous function) @ app.js:579
(anonymous function) @ app.js:582

Dialog

Vue Material is by far my favorite Material Design library for Vue.

Angular Material has a very nice modal/dialog system; is adding a similar component to vue material on the future roadmap?

thanks!

Spinner

Progress and activity indicators are visual indications of an app loading content.

Specs for Spinner

NPM Version Issue

I can't download the latest version, I see v0.3.0 on https://www.npmjs.com/package/vue-material
but if I run npm view vue-material versions I get:

[ '0.0.1',
  '0.0.2',
  '0.0.3',
  '0.0.4',
  '0.0.5',
  '0.0.6',
  '0.0.7',
  '0.0.8',
  '0.0.9',
  '0.0.10',
  '0.0.11',
  '0.0.12',
  '0.0.13',
  '0.0.14',
  '0.0.15',
  '0.1.0',
  '0.1.1',
  '0.1.2',
  '0.2.0' ]

Menu

Menus display a list of choices on a transient sheet of material.

Specs for Menu

Custom theme colors?

Hi, could you please describe how can I modify theme colors?
E.g. in material they have blue-grey theme.

What if I want to use 800 instead of default 500?
Thanks!

Multi Select

Sorry the question may be stupid, but there is the possibility of it using the "multiselect" already implemented?
Do you have any documentation explaining the properties of each component?

How to use Themes?

I am very interested in your theme control, Can detailed introduction for me ？

Grid Support

I see that this package does not include grid system. It would be great if it supports grid system. Anyway, great work out there!

md-select text vs value

Hi,

is there a reason for displaying value instead of the text in md-select?

i think it shoud behave like html select:
you click the "text" when dropdown is open (and this works also in vue-material)
and view "text" when the dropdown is closed (at the moment it display the value associated ad md-option.

thanks
/L2K

do not style scrollbars by default

it might be a personal preference, but i don't like that vue-material styles the scrollbars by default.

2 reasons:

• they do not fade out (like they do on chrome mobile)
• They are hard to change back.

i guess the fix for this, would be to just comment out https://github.com/marcosmoura/vue-material/blob/master/src/core/stylesheets/core.scss#L3

Manipulate toggle buttons

Is there anny way of manipulating the state of an toggle button for example:

<md-button class="md-icon-button" @click="toggleBold" :class="{ 'md-toggle': this.state.bold }">
    <md-icon>format_bold</md-icon>
</md-button>

It should be activated when the state bold is true... but it does not seem to work this way.

mdIcon not displaying properly

Thank you for your excellent package, it's really helpful.

I have a question though. I am unable to get mdIcon working properly. Let's say I want to get a home icon, I just get an uppercased text displaying 'HOME'. The css stylesheet is functionnal since I use other components from your package.

What am I missing ?
Thank you for your help !

demo with tooltip doesn't work on Firefox ?

Hello, and thank you for publishing your great work on material design !

I've tried your github.io, and I'm using Firefox 49.

When I go to https://marcosmoura.github.io/vue-material/#/components/tooltip , nothing really happens.

In fact, an error appear in the console : i.classList.forEach is not a function .

It works on Chromium.

Maybe it's not vue-material, maybe it's vuejs, I don't really know.

I'm sure you'll find it quicker than me !

Sidenav like vue-material site

Hi!
So i was wondering if there is a (built-in) way to show the side nav like on the vue-material site?
https://marcosmoura.github.io/vue-material/#/
Can't seem to find it myself.

md-button ignores type prop

The following md-button
<md-button type="submit" class="md-raised md-primary">Save</md-button>

Is rendered as
<button type="button" class="md-button md-raised md-primary">Save</button>

So the type is always rendered as "button"

Do you have a grid component in pipeline?

I like vue-material but I need a grid component to show tables. Do plan to implement something like this?

md-input-container issue (v0.3.0)

Hello, i've installed new 0.3.0 version. I use default 'select' template from demo, and i get errors in console:

vue.js:2643 [Vue warn]: Error when rendering component md-input-container:
vue.js:2264 TypeError: Cannot read property 'constructor' of null(…)

All other components still works fine.

Any idea?

Ask -> How to load on vuepack?

I use this starter pack here
I change this file to import vue-material here

so the code like below, and the button not look like material design.

Documentation templates

Sizes (md-input-container)

@marcosmoura I'm not managing to scale the size of the input fields and others. How do I do ?

Getting CSS to work with vue-cli

For the README.md

1. add

import 'vue-material/dist/vue-material.css'

to main.js

1. use

var VueMaterial = require('vue-material')
not
import VueMaterial from 'vue-material'

in main.js

to use with vue-cli (vue init webpack)

ps looks awesome!

Low framerate

Hi, vue-material seems very promising! Could you look into why framerate is quite low on mobile Chrome (Android 5)? For example if you compare opening

• https://marcosmoura.github.io/vue-material/#/components/sidenav

in mobile browser and toggling sidebar/drawer, and then compare it to some other vue.js material implementations such as

• http://quasar-framework.org/quasar-play/android/index.html#/showcase/layout/drawer
• https://myronliu347.github.io/vue-carbon/#!/ (sidebar on mobile)
• http://material-ui-vue.jackyang.me/docs/index.html#!/components/side-nav/side-nav
• http://johnleider.com/vue-materials-docs/#! (sidebar on mobile)
• https://josephuspaye.github.io/Keen-UI/#/ui-modal-docs (sidebar on mobile)
• http://vue-comps.github.io/vue-side-nav/#/basic
• http://appcomponents.org/material-components/#!/modals/showcase (sidebar on mobile)
• http://posva.net/vue-mdl/#!/menus (sidebar on mobile)
• http://loujiayu.github.io/vue-material-design/#!/components/dialog (sidebar on mobile)

Most run with much higher framerate. It is not only the sidebar, but other animations too, the problem is just most visible with the sidebar action. Perhaps there is a simple change that would fix it across the framework?

Cards

A card is a sheet of material that serves as an entry point to more detailed information.

Specs for Cards

Vue-material + Laravel gulpfile

I saw that u use laravel, and I wonder compile the components using gulpfile is possible ??
I would love to use the vue material into a new project I'm implementing.

SELECT component: display issue in IE11

When using the SELECT component in IE11, the scrollbars do not appear, and items spill outside the dropdown instead. I see this behavior both in my test page and in the official demo (https://marcosmoura.github.io/vue-material/#/components/select). See attachment for a screenshot.

[request] Menu bar to be implemented next

Can I please suggest that Menu bar to be the next in pipeline as it is required on almost all websites.