Skip to content

Commit 7b10a09

Browse files
committed
docs about the templateBuble option
1 parent f84e912 commit 7b10a09

File tree

2 files changed

+47
-0
lines changed

2 files changed

+47
-0
lines changed

docs/en/features/es2015.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ can be simplified to:
4545
<div :class="{ active, [`${prefix}-button`]: isButton }">
4646
```
4747

48+
You can also customize the features supported in tempaltes using the [`templateBuble` option](../options.md#templatebuble).
49+
4850
### Transpiling Normal `.js` Files
4951

5052
Since `vue-loader` only processes `*.vue` files, you'd need to tell Webpack to process normal `*.js` files with `babel-loader` or `buble-loader` in the Webpack config file. The project scaffolded with `vue-cli` already does it for you.

docs/en/options.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,3 +126,48 @@ module.exports = {
126126
}
127127
}
128128
```
129+
130+
### templateBuble
131+
132+
- type: `Object`
133+
- default:
134+
``` js
135+
{
136+
target: { chrome: 52 },
137+
transforms: {
138+
stripWith: true, // vue only
139+
computedProperty: true,
140+
conciseMethodProperty: true,
141+
templateString: true
142+
}
143+
}
144+
```
145+
146+
Configure options for a [Buble](https://buble.surge.sh/) transpile pass applied to raw render functions. The purpose of this additional pass is to:
147+
148+
1. add selective support to a few ES2015 features that are handy in template expressions (whitelisted in default transforms);
149+
150+
2. remove the `with` block inside render functions to make it strict-mode compliant and a bit more performant. This is enabled by the custom `stripWith` transform, and applied only at build time so that the base template compiler can be extremely small and lightweight.
151+
152+
With this option you can turn on additional [transforms](https://buble.surge.sh/guide/#supported-features) (e.g. arrow functions) or turn off `with` removal based on your specific needs. Example config with Webpack 2:
153+
154+
``` js
155+
module: {
156+
rules: [
157+
{
158+
test: /\.vue$/,
159+
loader: 'vue',
160+
options: {
161+
templateBuble: {
162+
objectAssign: 'Object.assign',
163+
// transforms object is merged with the defaults
164+
transforms: {
165+
stripWith: false,
166+
arrow: true
167+
}
168+
}
169+
}
170+
}
171+
]
172+
}
173+
```

0 commit comments

Comments
 (0)