Automatically import components in your Vue CLI app with tree shaking, supporting Vue 2 and 3.
Manually importing components for Vue out of the box isn’t that painful. Whether you import from a central index.js
or from a relative or absolute paths, both work well.
However, once your project grows, manually importing components soon becomes frustrating. Trying to remember where components are and refactoring now takes extra time and effort.
This package removes the frustration by scanning all your components and injecting the imports at built time, as they are used.
The Vue CLI ecosystem was missing this functionality, other frameworks already have it: Vuetify, Nuxt.js, Vite, Chakra, etc.
Install using Vue CLI. (Vue CLI 4+ is recommended)
vue add import-components
⚠️ Package is in beta, please report issues you find.
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.
<template>
<div>
<ComponentFoo />
<component-bar />
</div>
</template>
Remove imports
and components
from the script
section.
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.
The path used for scanning to find components. Note: It should be relative to your project root.
Default: ./src/components
Regex to find the files within the path
. Note: If you omit the pattern it will use the configured extensions
Default: **/*.{${extensions.join(',')},}
Regex to ignore files within the path
.
Default: [ '**/*.stories.js' ],
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
}
}
}
}
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.
<template>
<component :is="dynamicComponent"/>
</template>
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.
Author: loonpwn
Source Code: https://github.com/loonpwn/vue-cli-plugin-import-components
#vue #vuejs #javascript