feat: element-plus

package.json

@@ -59,6 +59,7 @@
     "commitizen": "^4.2.3",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-cli": "^4.0.0",
+    "element-plus": "^1.0.2-beta.35",
     "eslint": "^7.21.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
@@ -81,6 +82,7 @@
     "vite-plugin-components": "^0.8.0",
     "vite-plugin-fonts": "^0.1.5",
     "vite-plugin-icons": "^0.3.2",
+    "vite-plugin-importer": "^0.2.0",
     "vue": "^3.0.7",
     "vue-eslint-parser": "^7.6.0",
     "vue-router": "4",

src/modules/Home/views/home.vue

@@ -1,7 +1,12 @@
 <template>
-  <div>
-    Bismillah, Hello World!
-    <CilGlobeAlt class="inline" />
+  <div class="flex justify-center items-center flex-col">
+    <div>
+      Bismillah, Hello World!
+      <CilGlobeAlt class="inline" />
+    </div>
+    <ElButton>
+      👋
+    </ElButton>
   </div>
 </template>
 

vite.config.ts

@@ -1,9 +1,10 @@
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import ViteComponents from 'vite-plugin-components'
+import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'
 import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 import ViteFonts from 'vite-plugin-fonts'
+import ViteImport from 'vite-plugin-importer'
 
 export default defineConfig({
   plugins: [
@@ -15,10 +16,20 @@ export default defineConfig({
      */
     ViteComponents({
       customComponentResolvers: [
+        /**
+         * DESC:
+         * auto import iconify
+         */
         ViteIconsResolver({
           componentPrefix: '',
           enabledCollections: ['cil']
         }),
+
+        /**
+         * DESC:
+         * auto import element-plus
+         */
+        ElementPlusResolver()
       ],
     }),
 
@@ -33,6 +44,15 @@ export default defineConfig({
         families: ['Source Sans Pro']
       },
     }),
+
+    /**
+     * DESC:
+     * on-demand element-plus
+     */
+    ViteImport({
+      libraryName: 'element-plus',
+      style: true
+    })
   ],
 
   /**