vue-webpack-index v1.0.1

vue-webpack-index

Import a single file to generate code that imports and registers vue components.

Why?

Because it can accelerate rapid development of vue applications if you let something else import and register all your vue components.

Installation

npm i vue-webpack-index

Usage

Usage of this loader is explained within the following situation:

/webpack.conf.js
/index.js
/components
	/vue.index.json
	/foo.vue
	/bar.vue

webpack.conf.js

module.exports = {
	module: {
		rules: [
			{
				// Set the type option, if you are using .json files as index files:
				type: 'javascript/auto'
				// Usine .json files is recommended:
				test: /index\.vue\.json/,

				use: {
					loader: 'vue-webpack-index',
					options: {
						register: false,
						prefix: '',
						contextDependency: true,
						getId(file) {
							return 'some-component-id'
						}
					}
				}
			}
		]
	}
}

• register <boolean> - True to automatically register all components. Default is false
• prefix <string> - The prefix to prepend to all component id's when registering. Default is no prefix.
• contextDependency <boolean> - If true, the directory will be added as dependency to detect new component files when watching for changes. Default is true
• getId <function> - A function for getting the component id. + file <string> - The filename relative to the component directory.

Default Component IDs

By default, component ids are decamelized.

// Without prefix:
'foo.vue' --> 'foo'
'MyComponent.vue' --> 'my-component'

// With prefix set to 'foo-':
'bar.vue' --> 'foo-bar'
'MyComponent.vue' --> 'foo-my-component'

index.js

import components from './components/vue.index'

// Manually register components:
components.register()

• components <Map> - A map of component ids (excluding prefix) to components.
• components.register <function> - A function to register all components (including prefix if set).

// If the `register` loader option is set and you don't
// need access to components, you can just import the index file:
import './components/vue.index'

vue.index.json

If this file is imported in other modules, it will import all components from it's directory. If this file contains more than whitespace, the content is interpreted as json to override loader options.

{
	// Override the 'register' option:
	"register": true,
	// Override the 'prefix' option:
	"prefix": "foo-",
	// Override the 'contextDependency' option:
	"contextDependency": false
}