Goal
This article is meant to help you learn how to set up on-demand components auto importing for Vue using unplugin-vue-components in a Vue/Vite powered project. Unplugin supports and Webpack, Rspack, Vue CLI, Rollup and esbuild, but they are not part of this article (Read all unplugin features)
Prerequisites
Setup Vue project
To create a new Vue project using create-vue, simply run the following command in your terminal (instead of npm you can use your favourite package manager e.g. pnpm, yarn or bun):
npm create vue@latest
Now you should see, this prompt window. Pick the options that you would like to have:
Setup
1. Install dependency
npm i unplugin-vue-components -D
2. Initialize the plugin in vite.config.ts
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({ /* options */ }),
],
})
Typescript support
Typescript support is enabled by default if it's already enabled. Once the setup is done, a components.d.ts will be generated and updates automatically with the type definitions.
components.d.ts:
declare module 'vue' {
export interface GlobalComponents {
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
}
}
Make sure you also add components.d.ts to your tsconfig.json under include.
In our case, we will have to update tsconfig.app.json from:
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"]
to:
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "components.d.ts"],
Importing from UI Libraries
unplugin-vue-components supports built-in resolvers for popular UI libraries. But if you need something custom, unplugin-vue-components got you covered — you can also write your own resolver.
Final adjustments
- Remove component imports
- Sometimes the default config may not cover your use case - Custom configuration
- Done - view working example
Conclusion
- Easy to set up
- Helps with reducing import statements
- Outstanding Typescript support
- Better dev experience
Reference
- unplugin-vue-components
- create-vue
- Cover image by icarusgk/kawaii-tech-logos
Top comments (0)