VueComponentPlugin
Description
Transpile .vue files into JavaScript.
Install
This plugin depends on the following node modules:
vue-template-compiler
vue-template-es2015-compiler
vue-hot-reload-api
postcss-selector-parser
vue
yarn add vue-template-compiler vue-template-es2015-compiler vue-hot-reload-api vue postcss-selector-parser --dev
npm install vue-template-compiler vue-template-es2015-compiler vue-hot-reload-api vue postcss-selector-parser --save-dev
For more information about the *.vue
file specifications please see the
official documentation
Usage
Just import from FuseBox:
const { VueComponentPlugin } = require("fuse-box");
Inject into a chain:
fuse.plugin(VueComponentPlugin());
note: It's recommended to use typescript to compile your javascript. Even if you are not familiar with Typescript you can still use it to transpile modern code without dancing around the fire with a drum configuring Babel. {useTypescriptCompiler : true}
Or add it to the main config to make it available across bundles:
FuseBox.init({
useTypescriptCompiler: true,
plugins: [VueComponentPlugin()],
});
Defaults
If no lang
attributes are specified (see below) the VueComponentPlugin
will
use the following configuration out of the box:
<template>
Defaults tohtml
and uses HTMLPlugin<script>
Defaults tots
and uses FuseBox's integrated Typescript compiler<style>
Defaults tocss
and uses CSSPlugin
Language Attributes
When VueComponentPlugin
detects a lang
attribute on a block it will attempt
to match with the corresponding FuseBox plugin. For example:
<script lang="coffee">
- CoffeeScriptPlugin<script lang="js">
- BabelPlugin (will read configuration from.babelrc
file)<style lang="less">
- LESSPlugin<style lang="scss">
- SASSPlugin<template lang="pug">
- ConsolidatePlugin<template lang="hogan">
- ConsolidatePlugin
In addition, the VueComponentPlugin
will try to infer the lang
type if it is
not explicitly set but the src
contains an extension:
<template src="my-template.pug"> <!-- VueComponentPlugin will infer lang as "pug" -->
note: If using lang="js" and configuration item useTypescriptCompiler: true then FuseBox will use the internal Typescript compiler and NOT BabelPlugin
Using Custom Plugin Chains
If the above functionality doesn't fit your needs, you can override the
pre-processing by optionally setting the script
, style
or template
options. This follows the standard FuseBox way of defining plugin chains:
const { FuseBox, VueComponentPlugin, BabelPlugin, ConsolidatePlugin, SassPlugin, CSSResourcePlugin, PostCSSPlugin, CSSPlugin } = require('fuse-box')
const fsbx = FuseBox.init({
homeDir: './src',
output: 'dist/app.js',
plugins: [
VueComponentPlugin({
script: BabelPlugin({ ... }), // consider setting useTypescriptCompiler option in FuseBox
template: ConsolidatePlugin({ ... })
style: [
SassPlugin({ ... }),
CSSResourcePlugin({ ... }),
PostCSSPlugin( ... ),
CSSPlugin({ ... })
]
})
]
})
note: Overriding a plugin chain for a .vue block will make the VueComponentPlugin ignore any lang attributes.
Using Typescript Decorators
If you are writing Vue components with Typescript and are making use of
vue-class-component then you
will need to install tslib and update your
tsconfig.json
:
{
"compilerOptions": {
"importHelpers": true
}
}
External Files
The VueComponentPlugin
fully understands the src
attribute and will handle
external files just the same as inline content.
Scoped Styling
Scoped styling is fully supported by using the scoped
attribute. Support for
the module
attribute will be coming soon.
HMR
Hot Module Reloading is also fully supported, just enable it on your bundles by
calling .hmr()
. See here for more info.