TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published


    Automatically import components in your Vue CLI app with tree shaking, supporting Vue 2 and 3.

    Why and How?

    Checkout my article about why this feature exists, how it works and the issues.

    ℹ️ Need something more powerful? Consider using unplugin-vue-components


    • 🧙 Vue 2 and 3 support with full tree shaking
    • Lazy load your components
    • 🔥 Hot Module Reloading ready
    • 📐 Written in Typescript


    Install using Vue CLI. (Vue CLI 4+ is recommended)

    vue add import-components


    Add components to your components/ folder.

    | components/
    ---| ComponentFoo.vue
    ---| ComponentBar.vue

    Use them in any .vue as you would normally. Access your components with either PascalCase or kebab-case.

      <ComponentFoo />
      <component-bar />

    Remove imports and components from the script section.

    Async Component Loading

    You can load your components async by prefixing your component name with Lazy or lazy-, depending on your syntax.

      <!-- ComponentFoo will be loaded in async -->
      <LazyComponentFoo />
      <!-- ComponentBar will be loaded sync -->
      <ComponentBar />


    You can change the behaviour of the plugin by modifying the options in ./vue.config.js.

    // vue.config.js
    module.exports = {
      pluginOptions: {
        components: {


    All options are optional.

    path - String

    The path used for scanning to find components. Note: It should be relative to your project root.

    Default: ./src/components

    pattern - String

    Regex to find the files within the path. Note: If you omit the pattern it will use the configured extensions

    Default: **/*.{${extensions.join(',')},}

    ignore - String[]

    Regex to ignore files within the path.

    Default: [ '**/*.stories.js' ],

    mapComponent - (component : Component) => Component | false

    A function which you can use to filter out paths you don't want to be scanned.

    For example, if we wanted to access your automatically components only when they're prefixed them with auto, you could use the below code.

    // vue.config.js
    module.exports = {
      pluginOptions: {
        components: {
          // prefix all automatically imported components with an auto prefix
          mapComponent (component) {
            component.pascalCase = 'Auto' + upperFirst(component.pascalCase)
            component.kebabName = 'auto-' + component.pascalCase
            return component

    extensions - String[]

    When scanning the path for components, which files should be considered components.

    Default: ['.js', '.vue', '.ts']


    Static Imports Only

    Only components that are statically defined within your template will work.

      <component :is="dynamicComponent"/>

    Using folders as namespaces

    It is assumed you are using the Vue conventions for naming your components. The below would not work without manually mapping the components.

    | components/
    ---| Foo.vue
    ------| Namespace/Foo.vue

    It would create a conflict with two components called Foo.vue. You should name your component files with the namespace. i.e NamespaceFoo.vue.

    Javascript Components

    You may need to refresh your browser when you are updating them. The hot module reloading seems to be a little buggy sometimes.

    It's recommended that you stick with .vue SFC components.




    npm i vue-cli-plugin-import-components

    DownloadsWeekly Downloads






    Unpacked Size

    29 kB

    Total Files


    Last publish


    • harlan_zw