feat: migrate to unplugins

README.md

@@ -51,14 +51,14 @@ See [Vitesse](https://github.com/antfu/vitesse) for full featureset.
 ### Icons
 
 - [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
-- [`vite-plugin-icons`](https://github.com/antfu/vite-plugin-icons) - icons as Vue components
+- [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - using icons as components on-demand
 
 ### Plugins
 
 - [Vue Router](https://github.com/vuejs/vue-router)
   - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - file system based routing
 - [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
-- [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components) - components auto import
+- [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import
 - [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - Windi CSS integration
 - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
 

components.d.ts

@@ -1,15 +0,0 @@
-// generated by vite-plugin-components
-// read more https://github.com/vuejs/vue-next/pull/3399
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    CarbonCampsite: typeof import('virtual:vite-icons/carbon/campsite')['default']
-    CarbonLogoGithub: typeof import('virtual:vite-icons/carbon/logo-github')['default']
-    CarbonMoon: typeof import('virtual:vite-icons/carbon/moon')['default']
-    CarbonPedestrian: typeof import('virtual:vite-icons/carbon/pedestrian')['default']
-    CarbonSun: typeof import('virtual:vite-icons/carbon/sun')['default']
-    Footer: typeof import('./src/components/Footer.vue')['default']
-  }
-}
-
-export { }

package.json

@@ -7,26 +7,26 @@
   },
   "dependencies": {
     "@vueuse/core": "^6.0.0",
-    "vue": "^3.2.4",
+    "vue": "^3.2.6",
     "vue-demi": "^0.11.3",
     "vue-router": "^4.0.11"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.7.0",
-    "@iconify/json": "^1.1.389",
+    "@iconify/json": "^1.1.395",
-    "@types/node": "^16.6.1",
+    "@types/node": "^16.7.6",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@vitejs/plugin-vue": "^1.4.0",
+    "@vitejs/plugin-vue": "^1.6.0",
-    "@vue/compiler-sfc": "^3.2.4",
+    "@vue/compiler-sfc": "^3.2.6",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
-    "pnpm": "^6.13.0",
+    "pnpm": "^6.14.5",
-    "typescript": "^4.3.5",
+    "typescript": "^4.4.2",
-    "unplugin-auto-import": "^0.0.6",
+    "unplugin-auto-import": "^0.2.4",
-    "vite": "^2.5.0",
+    "unplugin-icons": "^0.7.3",
-    "vite-plugin-components": "^0.13.2",
+    "unplugin-vue-components": "^0.14.3",
-    "vite-plugin-icons": "^0.6.5",
+    "vite": "^2.5.1",
-    "vite-plugin-pages": "^0.17.3",
+    "vite-plugin-pages": "^0.17.5",
-    "vite-plugin-windicss": "^1.2.7"
+    "vite-plugin-windicss": "^1.3.0"
   }
 }

src/components/README.md

@@ -1,10 +1,9 @@
 ## Components
 
-Components in this dir will be auto-registered and on-demand, powered by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components).
+Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
-
 
 ### Icons
 
 You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
 
-It will only bundle the icons you use. Check out [`vite-plugin-icons`](https://github.com/antfu/vite-plugin-icons) for more details.
+It will only bundle the icons you use. Check out [`unplugin-icons`](https://github.com/antfu/unplugin-icons) for more details.

vite.config.ts

@@ -2,8 +2,9 @@ import path from 'path'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
-import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
+import Icons from 'unplugin-icons/vite'
-import ViteComponents from 'vite-plugin-components'
+import IconsResolver from 'unplugin-icons/resolver'
+import Components from 'unplugin-vue-components/vite'
 import WindiCSS from 'vite-plugin-windicss'
 import AutoImport from 'unplugin-auto-import/vite'
 
@@ -29,22 +30,18 @@ export default defineConfig({
     }),
 
     // https://github.com/antfu/vite-plugin-components
-    ViteComponents({
+    Components({
-      // generate `components.d.ts` for ts support with Volar
+      resolvers: [
-      globalComponentsDeclaration: true,
+        // auto import icons
-
-      // auto import icons
-      customComponentResolvers: [
         // https://github.com/antfu/vite-plugin-icons
-        ViteIconsResolver({
+        IconsResolver({
           componentPrefix: '',
-          // enabledCollections: ['carbon']
         }),
       ],
     }),
 
     // https://github.com/antfu/vite-plugin-icons
-    ViteIcons(),
+    Icons(),
 
     // https://github.com/antfu/vite-plugin-windicss
     WindiCSS(),