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:

import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {

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 }}
  <template slot-scope="{ id, text }">
    <span>{{ id }} {{ text }}</span>

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.

results matching ""

    No results matching ""