README

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.

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

JavaScript

 <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:

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:

<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:

<!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.

Fork the repo on GitHub
Clone the project to your own machine
Commit changes to your own branch
Push your work back up to your fork
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 and @im_a_developer on Twitter.

Follow Morioh and Vue Developers on FaceBook.

Join the official Discord room: https://discord.gg/sqxU6un.

Usage no npm install needed!