balm-ui

Next Generation Material UI for Vue.js

BalmUI is a modular and customizable Material Design UI library for Vue.js.

View Demo View Github

Features

  • Enterprise-class UI designed for web applications
  • A set of high-quality Vue components/plugins/directives/utils out of the box
  • Powerful theme customization in every detail
  • Integrated a complete set of the latest Material Icons
  • All components and plugins is highly customizable, and can be used individually

Documentation & Demos

Quick Start

Requirements

  • Vue.js@2.1.0+
  • :rocket: Balm CLI(Recommended) or Vue CLI or other toolchains

1. For Balm CLI (Recommended)

1.0 Create a project

balm init vue my-project
cd my-project
Sh

1.1 Installing balm-ui

yarn add balm-ui
# OR
npm install --save balm-ui
Sh

1.2 Configuration

update balm.config.js

  • get Material Icons without downloading (or, download and extract to my-project/app/fonts)

    const api = (mix) => {
  if (mix.env.isDev) {
    mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');
  }
};
    Js

  • edit my-project/config/balmrc.js for using Dart Sass

    module.exports = {
  styles: {
    extname: 'scss'
  }
  // Other Options...
};
    Js

1.3 Usage

Default Usage

  • edit my-project/app/styles/global/_vendor.scss

    /* import BalmUI styles */
@use 'balm-ui/dist/balm-ui';
    Sass (Scss)

    Recommend to use Sass in /path/to/project-name/styles/_vendor.scss, and you can use more advanced style usage of the BalmUI.

  • edit my-project/app/scripts/main.js

    import Vue from 'vue';
import BalmUI from 'balm-ui'; // Official Google Material Components
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components

Vue.use(BalmUI); // Mandatory
Vue.use(BalmUIPlus); // Optional
    Js
Standalone Usage

  • edit my-project/app/styles/global/_vendor.scss

    @use 'balm-ui/components/core';
@use 'balm-ui/components/button/button';
@use 'balm-ui/components/icon/icon';
@use 'balm-ui/components/dialog/dialog';
@use 'balm-ui/plugins/alert/alert';
    Sass (Scss)

  • edit my-project/app/scripts/main.js

    import Vue from 'vue';
import UiButton from 'balm-ui/components/button';
import $alert from 'balm-ui/plugins/alert';

Vue.use(UiButton);
Vue.use($alert);
    Js

1.4 Development and testing

npm run dev
Bash

  • edit a vue component: my-project/app/scripts/views/components/hello.vue

    <template>
  <div class="hello">
    ...
    <!-- Add a test button -->
    <ui-button @click="$alert('Hello BalmUI')">Click Me</ui-button>
  </div>
</template>
    HTML

1.5 Bundling and deployment

npm run prod
Bash

2. For Vue CLI

2.0 Create a project

vue create my-project
cd my-project
Sh

2.1 Installing balm-ui

yarn add balm-ui
# OR
npm install --save balm-ui
Sh

2.2 Configuration

  • edit my-project/vue.config.js

    module.exports = {
  runtimeCompiler: true,
  // NOTE: set alias via `configureWebpack` or `chainWebpack`
  configureWebpack: {
    resolve: {
      alias: {
        'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',
        'balm-ui-css': 'balm-ui/dist/balm-ui.css'
      }
    }
  }
  // chainWebpack: (config) => {
  //   config.resolve.alias
  //     .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')
  //     .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');
  // }
};
    Js

2.3 Usage

  • edit my-project/src/main.js

    import Vue from 'vue';
import App from './App.vue';

import BalmUI from 'balm-ui'; // Official Google Material Components
import BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components
import 'balm-ui-css';

Vue.config.productionTip = false;

Vue.use(BalmUI); // Mandatory
Vue.use(BalmUIPlus); // Optional

new Vue({
  render: (h) => h(App)
}).$mount('#app');
    Js

3. For <script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello BalmUI</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui.css"
    />
  </head>
  <body>
    <div id="app">
      <ui-button @click="$alert(message)" icon="add">SayHi</ui-button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/balm-ui"></script>
    <script src="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui-plus.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello BalmUI'
        }
      });
    </script>
  </body>
</html>
HTML

Enjoy ?