babel-plugin-veui

:::tip Currently VEUI is published on npm in the form of source code and has to be transpiled before use. (Read more about the trade-off of publishing source code in this post published by Henry Zhu on Babel's blog.) Babel plugins for Lodash and Vue JSX are required to transpile VEUI and VEUI provides its own Babel plugin to offer minimized code size while simply importing components. :::

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>

2.0 KiB Raw Blame History

babel-plugin-veui

Cherrypicking components

Automatic prefixing

2.0 KiB

Raw Blame History