Skip to content

Commit a22f059

Browse files
committed
Add installation notes
1 parent d27db44 commit a22f059

File tree

1 file changed

+59
-7
lines changed

1 file changed

+59
-7
lines changed

README.md

Lines changed: 59 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,64 @@
44
55
Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank">Material Design</a> specs. It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to <a href="https://saucelabs.com/u/vuejs" target="_blank">modern Web Browsers</a> through Vue 2.0. Build powerful and well-designed web apps that can can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.
66

7+
## Installation
8+
9+
Install Vue Material through npm or yarn
10+
``` bash
11+
npm install --save vue-material
12+
yarn add vue-material
13+
```
14+
15+
Or <a href="https://github.com/marcosmoura/vue-material/archive/master.zip" target="_blank" rel="noopener">download</a> and reference the script and the stylesheet in your HTML:
16+
17+
``` html
18+
<link rel="stylesheet" href="path/to/vue-material.css">
19+
<script src="path/to/vue-material.js"></script>
20+
```
21+
22+
Enable Vue Material in your application using ```Vue.use()```. You can always enable individual components:
23+
``` javascript
24+
Vue.use(VueMaterial);
25+
26+
// OR
27+
28+
Vue.use(VueMaterial.MdCore); //Required to boot vue material
29+
Vue.use(VueMaterial.MdButton);
30+
Vue.use(VueMaterial.MdIcon);
31+
Vue.use(VueMaterial.MdSidenav);
32+
Vue.use(VueMaterial.MdToolbar);
33+
```
34+
35+
To get Vue Material working properly, you'll need to configure and apply a default theme.
36+
37+
``` javascript
38+
Vue.material.theme.register('default', {
39+
primary: 'cyan',
40+
accent: 'pink'
41+
});
42+
```
43+
44+
Or you can register multiple themes at once.
45+
46+
``` javascript
47+
Vue.material.theme.registerAll({
48+
default: {
49+
primary: 'cyan',
50+
accent: 'pink'
51+
},
52+
phone: {
53+
primary: 'indigo',
54+
accent: 'pink'
55+
}
56+
});
57+
```
58+
759
## Build Setup
860

961
``` bash
1062
### Install dependencies
11-
npm install or yarn
63+
npm install
64+
yarn
1265

1366
### Start dev server with hot reload
1467
npm run dev
@@ -24,13 +77,12 @@ npm run build:lib
2477
```
2578

2679
## Credits and Thanks
27-
This library aims to delivery components using almost the same API of <a href="https://material.angularjs.org/latest/" target="_blank">Angular Material</a>
28-
29-
Thanks a lot to <a href="https://github.com/elviskang" target="_blank">elviskang</a> who provided me the **vue-material** name on npm.
30-
31-
Thanks to <a href="https://github.com/yyx990803" target="_blank">Evan You</a> for allowing me to use Vue.js Logo.
80+
* This library aims to delivery components using almost the same API of <a href="https://material.angularjs.org/latest/" target="_blank">Angular Material</a>
81+
* Thanks a lot to <a href="https://github.com/elviskang" target="_blank">elviskang</a> who provided me the **vue-material** name on npm.
82+
* Thanks to <a href="https://github.com/yyx990803" target="_blank">Evan You</a> for allowing me to use Vue.js Logo.
3283

33-
## Dependencies
84+
## Internal Dependencies
85+
You don't need to include any other library to work with vue-material. The focus of this project is to have a standalone build with no external dependence, but aiming to deliver the best experience without break the compatibility with the Vue.js core.
3486
* <a href="http://www.jacklmoore.com/autosize/" target="_blank">autosize</a>
3587
* <a href="https://www.npmjs.com/package/element.scrollintoviewifneeded-polyfill" target="_blank">element.scrollintoviewifneeded-polyfill</a>
3688
* <a href="https://github.com/lazd/scopedQuerySelectorShim" target="_blank">scopedQuerySelectorShim</a>

0 commit comments

Comments
 (0)