vite-plugin-components

vite-plugin-components

On demand components auto importing for Vite

Usage

Install

npm i vite-plugin-components -D # yarn add vite-plugin-components -D

Add it to vite.config.js

// vite.config.js
import ViteComponents from 'vite-plugin-components'

export default {
  plugins: [
    ViteComponents()
  ]
}

That's all.

Use components in templates as you would usually do but NO import and component registration required anymore! It will import components on demand, code spliting is also possible.

Basically, it automatically turns this

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

into this

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

Configuration

The following show the default values of the configuration

ViteComponents({
  // Relative paths to the directory to search for components.
  dirs: ['src/components'],
  // Valid file extensions for components.
  extensions: ['vue'],
  // Search for subdirectories
  deep: true,
})

Example

See the Vitesse starter template.

Thanks

Thanks to @brattonross, this project is heavily inspired by vite-plugin-voie.

License

MIT License © 2020 Anthony Fu