fuse-box
Version:
Fuse-Box a bundler that does it right
140 lines (103 loc) • 3.04 kB
Markdown
The Vue plugin is used to transpile .vue files into Javascript.
This package depends on the `vue-template-compiler`, `vue-template-es2015-compiler` and one of `typescript` and `babel-core` modules.
Also, if you want to include Vue library into the bundle, remember to install `vue` module too.
```bash
yarn add vue-template-compiler vue-template-es2015-compiler typescript babel-core vue --dev
npm install vue-template-compiler vue-template-es2015-compiler typescript babel-core vue --save-dev
```
```js
// fuse.js
const { FuseBox, VuePlugin } = require('fuse-box')
const fsbx = FuseBox.init({
homeDir: './src',
output: 'dist/app.js',
plugins: [
VuePlugin()
]
})
fsbx.dev()
fsbx.bundle('app.js')
.instructions('>index.ts')
.watch()
fsbx.run()
```
```typescript
// src/index.ts
import * as Vue from 'vue/dist/vue.js'
import * as App from './components/App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
```
```html
<!-- src/components/App.vue -->
<template>
<div>
<p>{{ msg }}</p>
<input type="text" v-model="msg" />
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
```
By default `VuePlugin` uses `typescript` to compile contents of `<script></script>`. By defining the `lang` attribute of the `<script>` tag, content can be compiled using desired transpiler. Currently only `ts` and `babel` are supported.
If `babel` attribute is given, VuePlugin will load babel config from there, otherwise VuePlugin will load `.babelrc` from the root of the project. If no config given and no rc found, it uses default config. Packages `babel-core` and `babel-plugin-transform-es2015-modules-commonjs` must be installed to use babel.
```js
// Configuring babel in fuse.js (Default)
VuePlugin({
babel: {
config: {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
})
// .babelrc
{
"plugins": ["transform-es2015-modules-commonjs"]
}
```
By defining the `lang` attribute of the `<template>` tag, content can be compiled to HTML using your favorite template engine.
The `consolidate` module must be installed in addition to the template engine module you want to use.
View a list of all [supported template engines](https://github.com/tj/consolidate.js#supported-template-engines).
```bash
yarn add consolidate pug --dev
npm install consolidate pug --save-dev
```
```html
<!-- src/components/App.vue -->
<template lang="pug">
.content
p {{ msg }}
input(type="text", v-model="msg")
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
```