babel-plugin-veui

Cherrypicking components

This Babel plugin allows you to write simple import statements without importing VEUI as a whole.

With this plugin, the following statement:

import { Button, Input } from 'veui'

will be automatically transformed into:

import Button from 'veui/components/Button'
import Input from 'veui/components/Input'

So only the components that are actually imported will appear in the final bundle. It works similarly with Lodash's babel-plugin-lodash.

Automatic prefixing

To avoid conflict with native HTML elements, it's recommended to prefix components when they are registered as follows:

export default {
  components: {
    'veui-button': Button,
    'veui-input': Input
  }
  // ...
}

It's kind of verbose so babel-plugin-veui helps to support the following usage:

import { VeuiButton, VeuiInput } from 'veui'

export default {
  components: {
    VeuiButton,
    VeuiInput
  }
  // ...
}

When the imported component is prefixed with Veui the plugin will find the corresponding component without the prefix. Now it's possible to use components inside templates as follows:

<veui-button>Submit</veui-button>

Apart from the prefix veui-, babel-plugin-veui also supports using v- as a prefix:

import { VButton, VInput } from 'veui'

export default {
  components: {
    VButton,
    VInput
  }
  // ...
}

And use as follows:

<v-button>Submit</v-button>