DEV Community

Cover image for How to auto import Vue components
Yordan Ramchev
Yordan Ramchev

Posted on • Updated on

How to auto import Vue components


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)


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
Enter fullscreen mode Exit fullscreen mode

Now you should see, this prompt window. Pick the options that you would like to have:


1. Install dependency

npm i unplugin-vue-components -D
Enter fullscreen mode Exit fullscreen mode

2. Initialize the plugin in vite.config.ts

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
Enter fullscreen mode Exit fullscreen mode

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.


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']
Enter fullscreen mode Exit fullscreen mode

Make sure you also add components.d.ts to your tsconfig.json under include.

In our case, we will have to update from:

"include": ["env.d.ts", "src/**/*", "src/**/*.vue"]
Enter fullscreen mode Exit fullscreen mode


"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "components.d.ts"],
Enter fullscreen mode Exit fullscreen mode

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

  1. Remove component imports
  2. Sometimes the default config may not cover your use case - Custom configuration
  3. Done - view working example


  • Easy to set up
  • Helps with reducing import statements
  • Outstanding Typescript support
  • Better dev experience


Top comments (0)