feat: auto import components

package.json

@@ -76,6 +76,7 @@
     "tailwindcss": "^2.0.3",
     "typescript": "^4.2.3",
     "vite": "^2.0.5",
+    "vite-plugin-components": "^0.8.0",
     "vite-plugin-icons": "^0.3.2",
     "vue": "^3.0.7",
     "vue-eslint-parser": "^7.6.0",

src/modules/Home/views/home.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     Bismillah, Hello Vue
-    <IconAccessibility />
+    <CilGlobeAlt />
   </div>
 </template>
 
@@ -14,15 +14,9 @@ import { useStore } from 'vuex'
 
 import { SET_TITLE } from '@/stores/Common/commonTypes'
 
-import IconAccessibility from '/@vite-icons/cil/globe-alt'
-
 export default defineComponent({
   name: 'Home',
 
-  components: {
-    IconAccessibility
-  },
-
   setup () {
     const store = useStore()
     const common = store.getters.common

vite.config.ts

@@ -1,11 +1,26 @@
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import ViteIcons from 'vite-plugin-icons'
+import ViteComponents from 'vite-plugin-components'
+import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 
 export default defineConfig({
   plugins: [
     Vue(),
+
+    /**
+     * NOTE:
+     * auto import components
+     */
+    ViteComponents({
+      customComponentResolvers: [
+        ViteIconsResolver({
+          componentPrefix: '',
+          enabledCollections: ['cil']
+        }),
+      ],
+    }),
+
     ViteIcons(),
   ],