Auto import and global register Vue components

English | 简体中文

Install

• First of all, install babel/core

• Then install the plugin

$ npm i -D babel-plugin-vue-components
# OR
$ yarn add -D babel-plugin-vue-components

Usage

const babel = require('@babel/core');
const VueComponentsPlugin = require('babel-plugin-vue-components');

babel.transform(code, {
  plugins: [
    [VueComponentsPlugin, {
      main: './src/main.ts',
      includes: ['./src/components/**/*.vue', './src/components/**/*.tsx'],
    }],
  ],
});

Auto import and register

If src/components contains file foo.vue and bar.tsx, run with the default config, the result is:

// before
import Vue from 'vue';

// after
import Vue from 'vue';
import foo from './foo.vue';
import bar from './bar.tsx';

Vue.component('foo', foo);
Vue.component('bar', bar);

Options

main

Type: String Default: ./src/main.js

Script path to be transformed

include

Type: Array[...String] | Array[...RegisterOptionInclude] Default: ['./src/components/**/*.vue']

An array of minimatch patterns, which specifies the files in the build the plugin should operate on. By default all files are targeted.

export interface RegisterOptionInclude {
  path: string;
  scope?: boolean;
  componentName?: 'file' | 'package' | 'option';
}

When scope is true，match the name attribute in the nearest package.json as Vue component's prefix. componentName establish the value of Vue component's name: file name，name attribute in the nearest package.json, or name attribute in matched Vue SFC file's option。

semicolon

Type: Boolean Default: true

Add semicolon at the end of lines or not.

extension

Type: Boolean Default: true

Keep file extension for import file or not.

quotes

Type: 'single' | 'double' Default: 'single'

Single or double quotes around import file path.