Next Generation Material UI for Vue.js
TL;DR: Vue 3 is now the new default version as of Monday, February 7, 2022!
(old) material.balmjs.com -> v8.material.balmjs.com
BalmUI is a modular and customizable Material Design UI library for Vue.js.
🎉 NOW,
balm-ui(v9.0) supports for Vue 3.0
- 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
- Visit v8.material.balmjs.com (for Vue 2)
- Visit material.balmjs.com (for Vue 3)
balm init vue#legacy my-project
cd my-projectyarn add balm-ui@8
# OR
npm install --save balm-ui@8update 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'); } };
-
edit
my-project/config/balmrc.jsfor using Dart Sassmodule.exports = { styles: { extname: 'scss' } // Other Options... };
-
edit
my-project/app/styles/global/_vendor.scss/* import BalmUI styles */ @use 'balm-ui/dist/balm-ui';
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.jsimport 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
-
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';
-
edit
my-project/app/scripts/main.jsimport Vue from 'vue'; import UiButton from 'balm-ui/components/button'; import $alert from 'balm-ui/plugins/alert'; Vue.use(UiButton); Vue.use($alert);
npm run dev-
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>
npm run prodvue create my-project
cd my-projectyarn add balm-ui@8
# OR
npm install --save balm-ui@8-
edit
my-project/vue.config.jsmodule.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'); // } };
-
edit
my-project/src/main.jsimport 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');
<!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@2"></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>Enjoy 👻
We'd love for you to contribute and make BalmUI even better than it is today! Please make sure to read the Contributing Guide before making a pull request. You can submit any ideas as pull requests or as GitHub issues.
We officially support the last two versions of every major browser. Specifically, we test on the following browsers:
- Chrome on Android, Windows, macOS, and Linux
- Firefox on Windows, macOS, and Linux
- Safari on iOS and macOS
- Edge on Windows
- IE 11 on Windows