Muse UI - a perfect UI framework with Vue 2.0 and Materail Design

Since the Vue 2.0 published, many open-source projects of vue has started their upgrading plans, so do I. Within the vue 1.0, I had published a vue library-vue-carbon, and now it is not longer compatible with the vue 2.0. Therefore I started to upgrade the project, only taken two months, vue-carbon has finished its upgrading floridly, to differentiat, it has a new name - Muse UI.

Be all eagerness to see it

Muse UI is aim at the mobile application and some desktop application which strict requirement for browser compatibility. Source code as following:

https://github.com/museui/muse-ui

and the document as following:

https://museui.github.io/

Features

• based on vue 2.0
• abundant components
• abundant themes, can be customized theme
• can be used with other plugins of vue, such as vue-router, vue-validator
• friendly API

Usage

npm install muse-ui --save

Loading all

import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)

Loading what you need

Firstly you need to update your webpack configuration

{
  // ...
  module: {
    loaders: [
      {
        test: /muse-ui.src.*?js$/,
        loader: 'babel'
      }
    ]
  },
  resolve: {
    // ...
    alias: {
      'muse-components': 'muse-ui/src'
    }
  }
}

main.js

import Vue from 'vue'
import 'muse-components/style/base.less' // including normalize.css in global style
import appbar from 'muse-components/appbar'
import avatar from 'muse-components/avatar'
import {bottomNav, bottomNavItem} from 'muse-components/bottomNav'
import {retina} from 'muse-components/utils'

retina() // 1px solution

// ...
Vue.component(appbar.name, appbar)
Vue.component(avatar.name, avatar)
Vue.component(bottomNav.name, bottomNav)
Vue.component(bottomNavItem.name, bottomNavItem)

Example of bottomNav usage

<template>
 <mu-bottom-nav :value="bottomNav" shift @change="handleChange">
    <mu-bottom-nav-item value="movies" title="Movies" icon="ondemand_video"/>
    <mu-bottom-nav-item value="music" title="Music" icon="music_note"/>
    <mu-bottom-nav-item value="books" title="Books" icon="books"/>
    <mu-bottom-nav-item value="pictures" title="Pictures" icon="photo"/>
</mu-bottom-nav>
</template>
<script>
export default {
  data () {
    return {
      bottomNav: 'movies'
    }
  },
  methods: {
    handleChange (val) {
      this.bottomNav = val
    }
  }
}
</script>

About Muse UI

For coordinate with vue 2.0, I had to change many APIs of vue-carbon. As there are too much change, I rename it as Muse UI, as a brand new UI framework.

Muse is derived from the ancient Greek myth of the goddess which is in charge of science and art, I hope the Muse UI can as well combine the science with art perfectly as Vue.

Follow-up

For following with Vue 2.0, Muse UI is based on the 2.0, and now is beta, we will perfect this project.

• solve the issues and API rationalization
• add unit test
• add more simple operation API(e.g simple message prompt, alert, confirm and so on)
• add more components(such as Notification, Pagination and so on)
• develop the muse of weex version

Note

This article has authorized by the authorship myron and translate it to English version, if you want to read the Chinese version, you can check out Muse UI — Vue2.0 和 Material Design 结合