Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/posva/vue-mdc

Material web components for Vue.js
https://github.com/posva/vue-mdc

components design google lite material mdc mdl vue web

Last synced: 2 months ago
JSON representation

Material web components for Vue.js

Lists

README 

        
**If you're looking for vue-mdl, check the [mdl branch](https://github.com/posva/vue-mdc/tree/mdl). To learn about what's happening, check [#139](https://github.com/posva/vue-mdc/issues/139)**



---





  

  


  

    last version

  

  

    Circle CI

  

  

    Codecov Coverage

  

  

    Discord

  

  


  

    

  

  

    

  

  

    

  




---



# Vue Material Components web



> Material Components Web for Vue.js



This is the adaptation of [Material Components web](https://github.com/material-components/material-components-web) for Vue.js. Keeping them fast, easy to use and, SSR ready.



The docs will be the demo, until then you can [check the test folder](test/specs) and the [Material Components web demo](http://material-components-web.appspot.com/)



## Installation



```bash

$ npm install --save vue-mdc

# or

$ yarn add vue-mdc

```



## Usage



### Bundler (Webpack, Rollup)



```js

import Vue from 'vue'

import VueMdc from 'vue-mdc'

// You need a specific loader for CSS files like https://github.com/webpack/css-loader

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



Vue.use(VueMdc)

```



### Browser



```html



```



### Docs



WIP 😁



## Development



### Launch visual tests



```bash

npm run dev

```



### Launch Karma with coverage



```bash

npm run dev:coverage

```



### Build



Bundle the js and css of to the `dist` folder:



```bash

npm run build

```



## Publishing



The `prepublish` hook will ensure dist files are created before publishing. This

way you don't need to commit them in your repository.



```bash

# Bump the version first

# It'll also commit it and create a tag

npm version

# Push the bumped package and tags

git push --follow-tags

# Ship it 🚀

npm publish

```



## License



[MIT](http://opensource.org/licenses/MIT)