update deps and readme

README.md

@@ -12,22 +12,23 @@
 
 * ⚡️ [Vite 2](https://github.com/vitejs/vite), [Vue 2](https://github.com/vuejs/vue) and [Composition-API](https://github.com/vuejs/composition-api)
 * 🚦 [Vue-Router](https://github.com/vuejs/vue-router)
-* 📦 [Components auto importing](https://github.com/antfu/vite-plugin-components)
 * 🎨 [Windi CSS](https://github.com/windicss/vite-plugin-windicss) - on-demand Tailwind CSS with speed and dark mode
-* 😃 [Icons as Vue components](https://github.com/antfu/vite-plugin-icons) - powered by [Iconify](https://github.com/iconify/iconify)
+* 📦 [Components auto importing](https://github.com/antfu/unplugin-vue-components)
-* 🧰 [VueUse](https://github.com/vueuse/vueuse) - collection of essential Vue Composition Utilities 
+* 😃 [Icons as Vue components](https://github.com/antfu/unplugin-icons) - powered by [Iconify](https://github.com/iconify/iconify)
-* 🔍 ESLint + Prettier 
+* 🧰 [VueUse](https://github.com/vueuse/vueuse) - collection of essential Vue Composition Utilities
+* 🔍 ESLint + Prettier
 * 🦾 Typescript
+
 # 📦 Vite plugins
 
 * [`vite-plugin-vue2`](https://github.com/underfin/vite-plugin-vue2) -
   Vue 2 support for Vite
-* [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components) -
-  On demand components auto importing for Vite
 * [`vite-plugin-windicss`](https://github.com/windicss/vite-plugin-windicss) -
   WindiCSS/TailwindCSS for Vite
-* [`vite-plugin-icons`](https://github.com/antfu/vite-plugin-icons) -
+* [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) -
-  Access thousands of icons as Vue components in Vite 
+  On demand components auto importing for Vite
+* [`unplugin-icons`](https://github.com/antfu/unplugin-icons) -
+  Access thousands of icons as Vue components in Vite
 
 # 🚀 Getting started
 
@@ -43,7 +44,7 @@ When you use this template, try follow the checklist to update your info properl
 - [ ] Change the favicon in `public`
 - [ ] Clean up the README(s) and remove routes
 
-## Clone 
+## Clone
 
 If you prefer to do it manually with a cleaner git history
 
@@ -63,7 +64,7 @@ Just run and visit [http://localhost:8080](http://localhost:8080)
 npm run dev
 ```
 
-## Build 
+## Build
 
 To build the App, run
 

package.json

@@ -27,9 +27,9 @@
     "husky": "^6.0.0",
     "prettier": "^2.2.1",
     "typescript": "^4.2.4",
+    "unplugin-icons": "^0.7.6",
+    "unplugin-vue-components": "^0.15.0",
     "vite": "^2.2.3",
-    "vite-plugin-components": "^0.8.4",
-    "vite-plugin-icons": "^0.5.0",
     "vite-plugin-vue2": "^1.4.4",
     "vite-plugin-windicss": "^0.15.10"
   }

vite.config.js

@@ -1,9 +1,10 @@
 import path from "path";
 import { defineConfig } from "vite";
 import { createVuePlugin } from "vite-plugin-vue2";
-import ViteComponents from "vite-plugin-components";
 import WindiCSS from "vite-plugin-windicss";
-import ViteIcons, { ViteIconsResolver } from "vite-plugin-icons";
+import Components from "unplugin-vue-components/vite";
+import Icons from "unplugin-icons/vite";
+import IconsResolver from "unplugin-icons/resolver";
 
 const config = defineConfig({
   resolve: {
@@ -19,17 +20,15 @@ const config = defineConfig({
 
   plugins: [
     createVuePlugin(),
-    ViteComponents({
+    WindiCSS(),
-      customComponentResolvers: [
+    Components({
-        ViteIconsResolver({
+      resolvers: [
+        IconsResolver({
           componentPrefix: "",
         }),
       ],
     }),
-    ViteIcons({
+    Icons(),
-      defaultStyle: "",
-    }),
-    WindiCSS(),
   ],
 
   server: {