vite-plugin-autoimport

Automatically detect and import components/modules for SvelteKit projects.

Before

After

Installation

npm i -D vite-plugin-autoimport

Basic configuration

// svelte.config.js

import autoImport from 'vite-plugin-autoimport';

export default {
  kit: {
    vite: {
      plugins: [
        autoImport({
          components: ['./src/components'],
        })
      ]
    }
  }
}

Name strategy

By default the component names will be namespaced with its directory names and normalized to upper camel case. For example:

<MyComponent />
<!-- my-component.svelte -->

<MyAnotherComponent />
<!-- my_another_component.svelte -->

<FormInput />
<!-- form/input.svelte -->

<Modal />
<!-- modal/index.svelte -->

Prefix

All components can be prefixed with a given name.

autoImport({
  components: [{ name: './src/components', prefix: 'shared' } ],
})

So that

<SharedComponent />
<!-- component.svelte -->

<SharedFormInput />
<!-- form/input.svelte -->

Flat

If the flat option is set to be true, no namespace will be added.

autoImport({
  components: [{ name: './src/components', flat: true } ],
})

So that

<Input />
<!-- form/input.svelte -->

<Popup />
<!-- modal/inline/popup.svelte -->

Full options

// svelte.config.js
import autoImport from 'vite-plugin-autoimport';

export default {
  kit: {
    vite: {
      plugins: [
        autoImport({

          // where to search for the components
          components: [
            './src/components',
            './src/routes/_fragments',
            { name: './src/lib', flat: true, prefix: 'lib' },
          ],

          // some frequently used modules
          module: {
            svelte: ['onMount', 'createEventDispatcher']
          },

          // manually import
          mapping: {
            API:  `import API from '~/src/api'`,
            Icon: `import * as Icon from '$components/icon'`,
          },

          // autoimport only for .svelte files
          // and only search for .svelte files inside components
          include: ['**/*.svelte'],

          // node_modules is ignored by default
          exclude: ['**/node_modules/**'],

        })
      ]
    }
  }
}