npm package: @morioh/material
Description: Morioh UI: Material UI wrapper for Vue.js
Author: Morioh Team
Latest version: 1.0.0-beta.2

[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/Morioh-Lab/Material)

# Morioh UI: Material UI wrapper for Vue.js


Quick start
------------

Looking to quickly add Morioh UI to your project? Use CDN, provided for free by the folks at UNPKG.

CSS
------------
Copy-paste the stylesheet  `<link>` into your `<head>` before all other stylesheets to load our CSS.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/morioh/dist/css/morioh.min.css">
```

JavaScript
------------

```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/vue.runtime.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@morioh/material@latest/dist/morioh.min.js"></script>
```

### NPM

```
npm install @morioh/material
```

### Yarn

```
yarn install @morioh/material
```

Usage
--

Although is not recommended you can use the full bundle of Morioh UI. This will import ALL components and UI Elements, and will hurt performance:

```js
import { createApp } from 'vue';

import MoriohUI from '@morioh/material';

const app = createApp(App);

app.use(MoriohUI);

app.mount('#app');
```


Roboto Font and Icons
------------
It's optional, but to have the best experience possible, use Roboto and Google Icons from Google CDN:

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

Starter template
------------
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">   
     <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">   
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@morioh/material@latest/dist/morioh.min.css">

    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">    
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
  </head>

  <body>
    <div id="app">
      {{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/vue.runtime.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@morioh/material@latest/dist/morioh.min.js"></script>

    <script>
      var app = Vue.createApp({
        setup() {
          var message = 'Hello word';

          return {
            message
          };
        }
      });

      app.use(MoriohUI);      

      app.mount('#app');
    </script>
   
  </body>
</html>
```

Contributing
------------

Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

 1. **Fork** the repo on GitHub
 2. **Clone** the project to your own machine
 3. **Commit** changes to your own branch
 4. **Push** your work back up to your fork
 5. Submit a **Pull request** so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!

Community
------------
Stay up to date on the development of Morioh UI and reach out to the community with these helpful resources.

Follow [@codek_tv](https://twitter.com/codek_tv) and [@im_a_developer](https://twitter.com/im_a_developer) on Twitter.

Follow [Morioh](https://www.facebook.com/moriohdotcom) and [Vue Developers](https://www.facebook.com/VueDevelopers) on FaceBook.

Join the official [Discord](https://discord.gg/sqxU6un) room: [https://discord.gg/sqxU6un](https://discord.gg/sqxU6un).