refactor!: renamed package to unplugin-vue-components

Author: antfu

README.md

@@ -1,10 +1,10 @@
-<h2 align='center'><samp>vite-plugin-components</samp></h2>
+<h2 align='center'><samp>unplugin-vue-components</samp></h2>
 
-<p align='center'>On demand components auto importing for Vite</p>
+<p align='center'>On-demand components auto importing for Vue.<br><sub>Works for Vite, Webpack, Vue CLI and more, powered by <a href="https://github.com/unjs/unplugin">unplugin</a></sub></p>
 
 <p align='center'>
-<a href='https://www.npmjs.com/package/vite-plugin-components'>
-<img src='https://img.shields.io/npm/v/vite-plugin-components?color=222&style=flat-square'>
+<a href='https://www.npmjs.com/package/unplugin-vue-components'>
+<img src='https://img.shields.io/npm/v/unplugin-vue-components?color=222&style=flat-square'>
 </a>
 </p>
 
@@ -20,25 +20,23 @@
 
 ## Usage
 
-> ℹ️ **Vite 2 is supported from `v0.6.x`, Vite 1's support is discontinued.**
-
 Install
 
 ```bash
-npm i vite-plugin-components -D # yarn add vite-plugin-components -D
+npm i unplugin-vue-components -D
 ```
 
 Add it to `vite.config.js`
 
 ```ts
 // vite.config.js
 import Vue from '@vitejs/plugin-vue'
-import ViteComponents from 'vite-plugin-components'
+import Components from 'unplugin-vue-components/vite'
 
 export default {
   plugins: [
     Vue(),
-    ViteComponents()
+    Components()
   ],
 };
 ```
@@ -84,24 +82,48 @@ export default {
 </script>
 ```
 
-## TypeScript
+## Migrate from `vite-plugin-components`
 
-To have TypeScript support for auto-imported components, there is [a PR](https://github.com/vuejs/vue-next/pull/3399) to Vue 3 extending the interface of global components. Currently, [Volar](https://github.com/johnsoncodehk/volar) has supported this usage already, if you are using Volar, you can change the config as following to get the support.
+`package.json`
 
-```ts
-// vite.config.js
-import ViteComponents from 'vite-plugin-components'
+```diff
+{
+  "devDependencies": {
+-   "vite-plugin-components": "*",
++   "unplugin-vue-components": "^0.14.0",
+  }
+}
+```
+
+`vite.config.json`
+
+```diff
+- import Components, { ElementPlusResolver } from 'vite-plugin-components'
++ import Components from 'unplugin-vue-components/vite'
++ import ElementPlusResolver from 'unplugin-vie-components/resolvers'
 
 export default {
   plugins: [
     /* ... */
-    ViteComponents({
-      globalComponentsDeclaration: true,
+    Components({
+      customComponentResolvers: [
+        ElementPlusResolver(),
+      ]
     }),
   ],
 }
 ```
 
+## TypeScript
+
+To have TypeScript support for auto-imported components, there is [a PR](https://github.com/vuejs/vue-next/pull/3399) to Vue 3 extending the interface of global components. Currently, [Volar](https://github.com/johnsoncodehk/volar) has supported this usage already, if you are using Volar, you can change the config as following to get the support.
+
+```ts
+Components({
+  dts: true, // enabled by default if `typescript is installed
+})
+```
+
 Once the setup is done, a `components.d.ts` will be generated and updates automatically with the type definitions. Feel free to commit it into git or not as you want.
 
 **Make sure you also add `components.d.ts` to your `tsconfig.json` under `includes`.**
@@ -112,13 +134,13 @@ It just works.
 
 ```ts
 // vite.config.js
-import { createVuePlugin } from 'vite-plugin-vue2'
-import ViteComponents from 'vite-plugin-components'
+import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
+import Components from 'unplugin-vue-components/vite'
 
 export default {
   plugins: [
-    createVuePlugin(),
-    ViteComponents(),
+    Vue2(),
+    Components(),
   ],
 }
 ```
@@ -129,61 +151,49 @@ We have several built-in resolvers for popular UI libraries like **Vuetify**, **
 
 Supported Resolvers:
 
-- [Ant Design Vue](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/antdv.ts)
-- [Element Plus](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/element-plus.ts)
-- [Headless UI](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/headless-ui.ts)
-- [Naive UI](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/naive-ui.ts)
-- [Prime Vue](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/prime-vue.ts)
-- [Vant](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/vant.ts)
-- [Varlet UI](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/varlet-ui.ts)
-- [Vuetify](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/vuetify.ts)
-- [VueUse Components](https://github.com/antfu/vite-plugin-components/blob/master/src/resolvers/vueuse.ts)
-- [View UI](https://github.com/antfu/vite-plugin-components/blob/main/src/resolvers/view-ui.ts)
-- [Element UI](https://github.com/antfu/vite-plugin-components/blob/main/src/resolvers/element-ui.ts)
+- [Ant Design Vue](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts)
+- [Element Plus](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/element-plus.ts)
+- [Headless UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/headless-ui.ts)
+- [Naive UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/naive-ui.ts)
+- [Prime Vue](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/prime-vue.ts)
+- [Vant](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vant.ts)
+- [Varlet UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/varlet-ui.ts)
+- [Vuetify](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vuetify.ts)
+- [VueUse Components](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vueuse.ts)
+- [View UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/resolvers/view-ui.ts)
+- [Element UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/resolvers/element-ui.ts)
 
 ```ts
 // vite.config.js
 import ViteComponents, {
   AntDesignVueResolver,
   ElementPlusResolver,
   VantResolver,
-} from 'vite-plugin-components'
-
-export default {
-  plugins: [
-    /* ... */
-    ViteComponents({
-      customComponentResolvers: [
-        AntDesignVueResolver(),
-        ElementPlusResolver(),
-        VantResolver(),
-      ]
-    }),
-  ],
-}
+} from 'unplugin-vue-components/resolvers'
+
+// your plugin installation
+Components({
+  customComponentResolvers: [
+    AntDesignVueResolver(),
+    ElementPlusResolver(),
+    VantResolver(),
+  ]
+})
 ```
 
 You can also write your own resolver easily:
 
 ```ts
-// vite.config.js
-import ViteComponents from 'vite-plugin-components'
-
-export default {
-  plugins: [
-    /* ... */
-    ViteComponents({
-      customComponentResolvers: [
-        // example of importing Vant
-        (name) => {
-          // where `name` is always CapitalCase
-          if (name.startsWith('Van'))
-            return { importName: name.slice(3), path: 'vant' }
-        }
-      ]
-    }),
-  ],
-}
+Components({
+  customComponentResolvers: [
+    // example of importing Vant
+    (name) => {
+      // where `name` is always CapitalCase
+      if (name.startsWith('Van'))
+        return { importName: name.slice(3), path: 'vant' }
+    }
+  ]
+})
 ```
 
 If you made other UI libraries configured, please feel free to contribute so it can help others using them out-of-box. Thanks!
@@ -193,7 +203,7 @@ If you made other UI libraries configured, please feel free to contribute so it
 The following show the default values of the configuration
 
 ```ts
-ViteComponents({
+Components({
   // relative paths to the directory to search for components.
   dirs: ['src/components'],
 

examples/naive-ui/components.d.ts

@@ -1,4 +1,4 @@
-// generated by vite-plugin-components
+// generated by unplugin-vue-components
 // read more https://github.com/vuejs/vue-next/pull/3399
 
 declare module 'vue' {

examples/naive-ui/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "cross-env DEBUG=vite-plugin-components:* vite",
-    "build": "cross-env DEBUG=vite-plugin-components:* vite build"
+    "dev": "cross-env DEBUG=unplugin-vue-components:* vite",
+    "build": "cross-env DEBUG=unplugin-vue-components:* vite build"
   },
   "dependencies": {
     "naive-ui": "^2.16.4",
@@ -17,7 +17,7 @@
     "cross-env": "^7.0.3",
     "typescript": "^4.3.5",
     "vite": "^2.4.4",
-    "vite-plugin-components": "workspace:*",
+    "unplugin-vue-components": "workspace:*",
     "vite-plugin-md": "^0.10.0",
     "vite-plugin-vue-svg": "^0.1.0"
   }

examples/naive-ui/vite.config.ts

@@ -1,6 +1,6 @@
 import { UserConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import ViteComponents, { NaiveUiResolver } from 'vite-plugin-components'
+import ViteComponents, { NaiveUiResolver } from 'unplugin-vue-components'
 
 const config: UserConfig = {
   plugins: [

examples/vue2/index.html examples/vite-vue2/index.html

@@ -1,13 +1,13 @@
 {
   "private": true,
   "scripts": {
-    "dev": "cross-env DEBUG=vite-plugin-components:* vite",
-    "build": "cross-env DEBUG=vite-plugin-components:* vite build"
+    "dev": "cross-env DEBUG=unplugin-vue-components:* vite",
+    "build": "cross-env DEBUG=unplugin-vue-components:* vite build"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
     "vite": "^2.4.4",
-    "vite-plugin-components": "workspace:*",
+    "unplugin-vue-components": "workspace:*",
     "vite-plugin-vue2": "^1.8.1"
   },
   "dependencies": {

examples/vue2/package.json examples/vite-vue2/package.json

@@ -1,6 +1,6 @@
 import { UserConfig } from 'vite'
 import { createVuePlugin } from 'vite-plugin-vue2'
-import ViteComponents from 'vite-plugin-components'
+import ViteComponents from 'unplugin-vue-components'
 
 const config: UserConfig = {
   plugins: [

examples/vue2/src/App.vue examples/vite-vue2/src/App.vue

@@ -1,4 +1,4 @@
-// generated by vite-plugin-components
+// generated by unplugin-vue-components
 // read more https://github.com/vuejs/vue-next/pull/3399
 
 declare module 'vue' {

examples/vue2/src/components/ComponentA.vue examples/vite-vue2/src/components/ComponentA.vue

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "cross-env DEBUG=vite-plugin-components:* vite",
-    "build": "cross-env DEBUG=vite-plugin-components:* vite build"
+    "dev": "cross-env DEBUG=unplugin-vue-components:* vite",
+    "build": "cross-env DEBUG=unplugin-vue-components:* vite build"
   },
   "dependencies": {
     "vant": "^3.2.0",
@@ -15,10 +15,11 @@
     "@vitejs/plugin-vue": "^1.4.0",
     "@vue/compiler-sfc": "^3.2.2",
     "cross-env": "^7.0.3",
+    "has-pkg": "^0.0.1",
     "typescript": "^4.3.5",
+    "unplugin-icons": "^0.1.0",
+    "unplugin-vue-components": "workspace:*",
     "vite": "^2.4.4",
-    "vite-plugin-components": "workspace:*",
-    "vite-plugin-icons": "^0.6.5",
     "vite-plugin-inspect": "^0.0.2",
     "vite-plugin-md": "^0.10.0",
     "vite-plugin-vue-svg": "^0.1.0"

examples/vue2/src/components/ComponentB.vue examples/vite-vue2/src/components/ComponentB.vue

@@ -1,9 +1,11 @@
 import path from 'path'
 import { UserConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import ViteComponents, { VantResolver } from 'vite-plugin-components'
+import ViteComponents from 'unplugin-vue-components/vite'
+import { VantResolver } from 'unplugin-vue-components/resolvers'
 import Markdown from 'vite-plugin-md'
-import Icons, { ViteIconsResolver } from 'vite-plugin-icons'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
 // @ts-expect-error
 import SVG from 'vite-plugin-vue-svg'
 import Inspect from 'vite-plugin-inspect'
@@ -25,7 +27,7 @@ const config: UserConfig = {
     ViteComponents({
       extensions: ['vue', 'md', 'svg'],
       directoryAsNamespace: true,
-      globalComponentsDeclaration: true,
+      dts: true,
       globalNamespaces: ['global'],
       importPathTransform: path => path.endsWith('.svg') ? `${path}?component` : undefined,
       customLoaderMatcher: path => path.endsWith('.md'),
@@ -35,7 +37,7 @@ const config: UserConfig = {
             return '/src/CustomResolved.vue'
         },
         VantResolver(),
-        ViteIconsResolver({
+        IconsResolver({
           componentPrefix: 'i',
         }),
       ],

examples/vue2/src/components/ComponentD.vue examples/vite-vue2/src/components/ComponentD.vue

@@ -0,0 +1,2 @@
+export * from './dist/nuxt'
+export { default } from './dist/nuxt'