ES2015
When vue-loader detects the presence of babel-loader or buble-loader in the same project, it will use them to process the <script> parts of all *.vue files, allowing us to use ES2015 in our Vue components. If you haven't picked up the new language features yet, you definitely should. Some good learning resources:
Here's a typical pattern you will see when importing other Vue components:
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
}
}
</script>
We are using ES2015's Object literal shorthand here to define the child components. { ComponentA } is simply shorthand for { ComponentA: ComponentA }. Vue will automatically convert the key to component-a, so you can use the imported component in the template as <component-a>.
ES2015 in Templates
<template> in *.vue files are compiled into JavaScript render functions and then processed by a custom build of Buble to support ES2015 features. This allows you to use features such as Object shorthand properties and computed properties:
<div :class="[{ active: active }, isButton ? prefix + '-button' : null]">
can be simplified to:
<div :class="{ active, [`${prefix}-button`]: isButton }">
vue@^2.1.0 only: You can even use parameter destructuring with v-for or scoped slots:
<li v-for="{ id, text } in items">
{{ id }} {{ text }}
</li>
<my-component>
<template slot-scope="{ id, text }">
<span>{{ id }} {{ text }}</span>
</template>
</my-component>
You can also customize the features supported in templates using the buble option.
Transpiling Normal .js Files
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.
Configuring Babel with .babelrc
babel-loader respects .babelrc, so it is the recommended approach to configure the Babel presets and plugins.