Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fork/vue-components-loader
A webpack loader for treeshaking and auto importing Vue components.
https://github.com/fork/vue-components-loader
Last synced: 1 day ago
JSON representation
A webpack loader for treeshaking and auto importing Vue components.
- Host: GitHub
- URL: https://github.com/fork/vue-components-loader
- Owner: fork
- License: mit
- Created: 2020-05-29T11:18:45.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T21:05:29.000Z (almost 2 years ago)
- Last Synced: 2024-03-25T22:04:27.418Z (9 months ago)
- Language: JavaScript
- Size: 119 KB
- Stars: 1
- Watchers: 8
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @4rk/vue-components-loader
A webpack loader for treeshaking and auto importing Vue components.
## Features
- Based on and heavily inspired by [vuetify-loader](https://github.com/vuetifyjs/vuetify-loader) and [@nuxt/components](https://github.com/nuxt/components)
- Works for _every_ Vue project using webpack, no vuetify or nuxt needed!
- Scans and auto-imports components, no more `components: {}`!
- May make your bundle smaller compared to global `Vue.registerComponent()`!## Usage
Create your components:
```
components/
ComponentFoo.vue
ComponentBar.vue
```Use them whenever you want, they will be auto imported in .vue files :
```html
```
No need anymore to manually import them in the script section! The component name gets infered from the filename.
## Setup
Add the plugin to your `webpack.config.js` and configure where your Vue components can be found:
```javascript
// webpack.config.jsconst VueComponentsLoaderPlugin = require("vue-components-loader");
module.exports = {
...plugins: [
new VueComponentsLoaderPlugin({
paths: ["./components/**/*.vue"]
})
],...
};
```## Options
### `paths`
- Type: `Array` or `Path` object (see below)
List of directories to scan, with customizable options when using Object syntax.
String items are shortcut to Object with only path provided :
```javascript
"./src/**/*.vue" === { path: "./src/**/*.vue" };
```#### `Path` object properties
##### `path`
- Type: `String`
- RequiredPath glob to your components. Must follow the [node-glob pattern style](https://github.com/isaacs/node-glob#glob-primer).
##### `ignore`
- Type: `String` or `Array`
Ignore glob patterns.
##### `prefix`
- Type: `String`
Prefix component names.
## License
[MIT License](LICENSE)