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

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

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

Setup

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.

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']
  }
}
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 tsconfig.app.json from:

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

to:

"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

Conclusion

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

Reference

Top comments (0)