feat: migrate to unplugins

README.md

@@ -30,7 +30,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 - 🎨 [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS framework
 
-- 😃 [Use icons from any icon sets, with no compromise](https://github.com/antfu/vite-plugin-icons)
+- 😃 [Use icons from any icon sets, with no compromise](https://github.com/antfu/unplugin-icons)
 
 - 🌍 [I18n ready](./locales)
 
@@ -60,7 +60,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 ### 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) - icons as Vue components
 
 ### Plugins
 
@@ -68,7 +68,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
   - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - file system based routing
   - [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - layouts for pages
 - [Pinia](https://pinia.esm.dev) - Intuitive, type safe, light and flexible Store for Vue using the composition api
-- [`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
 - [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
 - [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
 - [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - Windi CSS Integration

package.json

@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.7.0",
-    "@iconify/json": "^1.1.393",
+    "@iconify/json": "^1.1.395",
     "@intlify/vite-plugin-vue-i18n": "^2.4.0",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/nprogress": "^0.2.0",
@@ -32,18 +32,18 @@
     "https-localhost": "^4.6.5",
     "markdown-it-link-attributes": "^3.0.0",
     "markdown-it-prism": "^2.2.0",
-    "pnpm": "^6.14.3",
+    "pnpm": "^6.14.5",
-    "typescript": "^4.3.5",
+    "typescript": "^4.4.2",
-    "unplugin-auto-import": "^0.1.5",
+    "unplugin-auto-import": "^0.2.4",
+    "unplugin-icons": "^0.7.3",
+    "unplugin-vue-components": "^0.14.3",
     "vite": "^2.5.1",
-    "vite-plugin-components": "^0.13.2",
-    "vite-plugin-icons": "^0.6.5",
     "vite-plugin-md": "^0.11.0",
-    "vite-plugin-pages": "^0.17.4",
+    "vite-plugin-pages": "^0.17.5",
     "vite-plugin-pwa": "^0.11.2",
     "vite-plugin-vue-layouts": "^0.3.1",
     "vite-plugin-windicss": "^1.3.0",
-    "vite-ssg": "^0.14.6",
+    "vite-ssg": "^0.14.7",
     "vue-tsc": "^0.3.0"
   }
 }

src/components/README.md

@@ -1,10 +1,10 @@
 ## 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

@@ -3,11 +3,12 @@ import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
 import Layouts from 'vite-plugin-vue-layouts'
-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 AutoImport from 'unplugin-auto-import/vite'
 import Markdown from 'vite-plugin-md'
 import WindiCSS from 'vite-plugin-windicss'
-import AutoImport from 'unplugin-auto-import/vite'
 import { VitePWA } from 'vite-plugin-pwa'
 import VueI18n from '@intlify/vite-plugin-vue-i18n'
 import Prism from 'markdown-it-prism'
@@ -45,29 +46,27 @@ export default defineConfig({
       ],
     }),
 
-    // https://github.com/antfu/vite-plugin-components
+    // https://github.com/antfu/unplugin-vue-components
-    ViteComponents({
+    Components({
       // allow auto load markdown components under `./src/components/`
       extensions: ['vue', 'md'],
 
       // allow auto import and register components used in markdown
-      customLoaderMatcher: id => id.endsWith('.md'),
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
 
-      // generate `components.d.ts` for ts support with Volar
+      // custom resolvers
-      globalComponentsDeclaration: true,
+      resolvers: [
-
+        // auto import icons
-      // auto import icons
+        // https://github.com/antfu/unplugin-icons
-      customComponentResolvers: [
+        IconsResolver({
-        // https://github.com/antfu/vite-plugin-icons
-        ViteIconsResolver({
           componentPrefix: '',
           // enabledCollections: ['carbon']
         }),
       ],
     }),
 
-    // https://github.com/antfu/vite-plugin-icons
+    // https://github.com/antfu/unplugin-icons
-    ViteIcons(),
+    Icons(),
 
     // https://github.com/antfu/vite-plugin-windicss
     WindiCSS({