Features

Installation

npm i unplugin-vue-components -D

Usage

<template><div><HelloWorldmsg="Hello Vue 3.0 + Vite"/></div></template><script>exportdefault{name:'App',}</script>

<template><div><HelloWorldmsg="Hello Vue 3.0 + Vite"/></div></template><script>importHelloWorldfrom'./src/components/HelloWorld.vue'exportdefault{name:'App',components:{      HelloWorld,},}</script>

TypeScript

Components({dts:true,// enabled by default if `typescript` is installed})

Importing from UI Libraries

import{AntDesignVueResolver,ElementPlusResolver,VantResolver,}from'unplugin-vue-components/resolvers'// vite.config.jsimportComponentsfrom'unplugin-vue-components/vite'// your plugin installationComponents({resolvers:[AntDesignVueResolver(),ElementPlusResolver(),VantResolver(),],})

Components({resolvers:[// example of importing Vant(componentName)=>{// where `componentName` is always CapitalCaseif(componentName.startsWith('Van'))return{name:componentName.slice(3),from:'vant'}},],})

Types for global registered components

Components({dts:true,types:[{from:'vue-router',names:['RouterLink','RouterView'],}],})

Components({// Disable type only registrationtypes:[],})

Migrate fromvite-plugin-components

{  "devDependencies": {-   "vite-plugin-components": "*",+   "unplugin-vue-components": "^0.14.0",  }}

- import Components, { ElementPlusResolver } from 'vite-plugin-components'+ import Components from 'unplugin-vue-components/vite'+ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default {  plugins: [    /* ... */    Components({      /* ... */      // `customComponentsResolvers` has renamed to `resolver`-     customComponentsResolvers: [+     resolvers: [        ElementPlusResolver(),      ],      // `globalComponentsDeclaration` has renamed to `dts`-     globalComponentsDeclaration: true,+     dts: true,      // `customLoaderMatcher` is depreacted, use `include` instead-     customLoaderMatcher: id => id.endsWith('.md'),+     include: [/\.vue$/, /\.vue\?vue/, /\.vue\.[tj]sx?\?vue/, /\.md$/],    }),  ],}

Configuration

Components({// relative paths to the directory to search for components.dirs:['src/components'],// valid file extensions for components.extensions:['vue'],// Glob patterns to match file names to be detected as components.// You can also specify multiple like this: `src/components/*.{vue,tsx}`// When specified, the `dirs`, `extensions`, and `directoryAsNamespace` options will be ignored.// If you want to exclude components being registered, use negative globs with leading `!`.globs:['src/components/*.vue'],// search for subdirectoriesdeep:true,// resolvers for custom componentsresolvers:[],// generate `components.d.ts` global declarations,// also accepts a path for custom filename// default: `true` if package typescript is installeddts:false,// Allow subdirectories as namespace prefix for components.directoryAsNamespace:false,// Collapse same prefixes (camel-sensitive) of folders and components// to prevent duplication inside namespaced component name.// works when `directoryAsNamespace: true`collapseSamePrefixes:false,// Subdirectory paths for ignoring namespace prefixes.// works when `directoryAsNamespace: true`globalNamespaces:[],// auto import for directives// default: `true` for Vue 3, `false` for Vue 2// Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.// To install Babel, run: `npm install -D @babel/parser`directives:true,// Transform path before resolvingimportPathTransform:v=>v,// Allow for components to override other components with the same nameallowOverrides:false,// Filters for transforming targets (components to insert the auto import)// Note these are NOT about including/excluding components registered - use `globs` or `excludeNames` for thatinclude:[/\.vue$/,/\.vue\?vue/,/\.vue\.[tj]sx?\?vue/],exclude:[/[\\/]node_modules[\\/]/,/[\\/]\.git[\\/]/,/[\\/]\.nuxt[\\/]/],// Filters for component names that will not be imported// Use for globally imported async components or other conflicts that the plugin cannot detectexcludeNames:[/^Async.+/],// Vue version of project. It will detect automatically if not specified.// Acceptable value: 2 | 2.7 | 3version:2.7,// Only provide types of components in library (registered globally)// see https://github.com/unplugin/unplugin-vue-components/blob/main/src/core/type-imports/index.tstypes:[/* ... */],})

Example

Thanks

License