Unplugin Vue Components

unplugin-vue-components (later called plugins) is a plugin that automatically introduces vue components on demand, and is a masterpiece of Antfu.

Requirements

It is common to bring in component libraries on-demand in order to reduce the project size. However, if you use component library content very frequently in your project, or even need to introduce multiple component libraries, this can become very cumbersome, potentially requiring a dozen components to be imported in a single component and manually added to Components to be used. Such behavior, in a project, may be repeated many times, time-consuming and labor-intensive.

So what problem does the plugin solve? The plugin is based on unplugin and has support for Vue Components. It can preset conditions to match the components used in the component template, and then automatically introduce them on demand. In addition, you can specify a directory, and the plugin will register the components in the directory, so that they can be used directly in the global scope without importing them.

Usage

unplugin-vue-components is more widely supported.

According to the official description.

• Support for Vue 2 and Vue 3
• Support for components and directives
• Support for Vite, Webpack, Vue CLI, Rollup, esbuild, etc., which depends on what unplugin supports.
• Support for tree-shaking, importing only the components used
• Full support for TypeScript
• Built-in parsing support for many popular component libraries, such as Ant Design Vue 3, which I need to use

For more information, please visit antfu/unplugin-auto-import.

Installation

1

npm install unplugin-vue-components -D

or

1

yarn add unplugin-vue-components -D

Automatically import UI libraries

Here we use vite as an example.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// vite.config.js
import { defineConfig } from "vite";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    Components({
      resolvers: [AntDesignVueResolver()],
    }),
  ],
});

Now you can use Ant Design Vue components freely in your project, the plugin will automatically match and introduce the corresponding components and style files, which can be said to be a very good experience, which is the recommended way to use Ant Design Vue at this stage.

Automatically import components

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// vite.config.js
import { defineConfig } from "vite";
import Components from "unplugin-vue-components/vite";

export default defineConfig({
  plugins: [
    Components({
      // 组件所在位置
      dirs: ["src/components"],
      //   resolvers: [AntDesignVueResolver()]
      dts: "src/components.d.ts",
    }),
  ],
});

If TypeScript is installed, the plugin will automatically turn on the dts option, generating the ./auto-imports.d.ts file.

Be careful not to have duplicate components, as they will be automatically ignored to prevent conflicts.

Full configuration item definition

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

export interface Options {
  /**
   * Preset names or custom imports map
   *
   * @default []
   */
  imports?: Arrayable<ImportsMap | PresetName>;

  /**
   * Identifiers to be ignored
   */
  ignore?: (string | RegExp)[];

  /**
   * Pass a custom function to resolve the component importing path from the component name.
   *
   * The component names are always in PascalCase
   */
  resolvers?: Arrayable<Arrayable<Resolver>>;

  /**
   * Filepath to generate corresponding .d.ts file.
   * Default enabled when `typescript` is installed locally.
   * Set `false` to disable.
   *
   * @default './auto-imports.d.ts'
   */
  dts?: string | boolean;

  /**
   * Allow overriding imports sources from multiple presets.
   *
   * @default false
   */
  presetOverriding?: boolean;

  /**
   * Rules to include transforming target.
   *
   * @default [/\.[jt]sx?$/, /\.vue\??/]
   */
  include?: FilterPattern;

  /**
   * Rules to exclude transforming target.
   *
   * @default [/node_modules/, /\.git/]
   */
  exclude?: FilterPattern;

  /**
   * Generate source map.
   *
   * @default false
   */
  sourceMap?: boolean;

  /**
   * Generate corresponding .eslintrc-auto-import.json file.
   */
  eslintrc?: ESLintrc;
}