WIP

KTUSA PS/ClientApp/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.20.0-0",
+    "balm-ui": "^8.44.0",
     "bootstrap": "^4.5.3",
     "cookies-js": "^1.2.3",
     "core-js": "^3.7.0",

KTUSA PS/ClientApp/src/main.js

@@ -3,8 +3,15 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import BalmUI from "balm-ui"; // Official Google Material Components
+import BalmUIPlus from "balm-ui-plus"; // BalmJS Team Material Components
+import "balm-ui-css";
 
 const app = createApp(App);
+
 app.use(router);
 app.use(store);
+app.use(BalmUI);
+app.use(BalmUIPlus);
+
 app.mount("#app");

KTUSA PS/ClientApp/src/pages/Home.vue

@@ -8,7 +8,5 @@
 </template>
 
 <script>
-export default {
-  name: "Home page",
-};
+export default {};
 </script>

KTUSA PS/ClientApp/vue.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  runtimeCompiler: true,
+  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");
+  },
+};