@morioh/material
v1.0.0-beta.2
Published
Morioh UI: Material UI wrapper for Vue.js
Downloads
5
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/[email protected]/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/materialYarn
yarn install @morioh/materialUsage
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/[email protected]/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.