vue-loader

• Support for SSR optimizations in upcoming Vue 2.4

• fix #811

• fix #797

• Revert incorrect keyframes related change

• fix #790

Breaking

• Upgrading vue-style-loader to 3.0 introduces a small breaking change: the CSS contained in a *.vue component will now be lazy-injected, when the component is rendered for the first time. (Previously the style is injected as soon as the component is imported.)

New

• Compatibility for the new features in vue-server-renderer@^2.3.0.

• extractCSS option: simple configuration for CSS extraction. docs

• The loader now automatically infers sass-loader?indentedSyntax when using <style lang="sass"> , and infers sass-loader when using <style lang="scss">.

Fixed

• #757 bring back webpack context for postcss.config.js

New

• Now supports auto-loading the same PostCSS config files. The formats supported are exactly the same with postcss-loader. This means you can use the same PostCSS config file for both vue-loader and postcss-loader.

This is the recommended way to configure PostCSS inside vue-loader from now on.

Breaking Changes

• This is a major release because of the PostCSS config file support - if you already have PostCSS config file in a project using vue-loader < 11.0.0, you will need to unify the two and remove the inline postcss option passed to vue-loader.

Fixed

• Should now work properly with HappyPack.

• New options: preLoaders and postLoaders.

• Now uses vue-style-loader 2.x, which supports server-side rendering out of the box.

Now supports chaining with other loaders so the entire *.vue file can be pre-processed by other loaders:

{ test: /\.vue$/, loader: 'vue-loader!my-other-loader' }

Breaking Changes

• vue-template-compiler is now a peer dependency instead of a direct dependency. This allows the user to pin vue-template-compiler to a specific version instead of relying on the implicit upgrades from a semver caret range.
• templateBuble option is merged with the buble option. This means the template expressions will be using the same Buble configuration with buble-loader (if present).

New

All Buble base transforms are now enabled by default for template expression, including arrow functions and parameter destructuring (Note: the following examples all require Vue core ^2.1.0):

<!-- arrow functions in v-on handlers -->
<button @click="e => log(e)"></button>

<!-- destructuring in v-for -->
<li v-for="{ id, text } in items">
  {{ id }} {{ text }}
</li>

<!-- destructuring in scoped slots -->
<my-component>
  <template scope="{ id, text }">
    <span>{{ id }} {{ text }}</span>
  </template>
</my-component>

New option: templateBuble (removed in 10.0.0 and merged with buble)

New feature: CSS Modules

• added buble option. docs

• added preserveWhitespace option. docs

• added esModule option. docs

New

• A subset of ES2015 features are now supported inside templates (requires vue@^2.0.0-rc.3):

  • Template string:

    <!-- before -->
    <a :href="'http://' + url + '/' + id">
    
    <!-- after -->
    <a :href="`http://${url}/${id}`">
    

  • Object property shorthand:

    <!-- before -->
    <div :class="{ active: active }">
    
    <!-- after -->
    <div :class="{ active }">
    

  • Computed property names:

    <!-- before -->
    <div :class="[someCondition ? someClass : null]">
    
    <!-- after -->
    <div :class="{ [someClass]: someCondition }">
    

Breaking Change

Note: breaking change in a minor release because the 9.x line is considered pre-releases until Vue 2.0 is officially out.

• Named exports support has been reverted. The module export behavior is now the same with vue-loader 8.x: ES2015 default export will be normalized into module.exports. This means the following are equivalent:

  import App from './App.vue'
  
  const App = require('./App.vue') // no .default required
  

  The main reasoning behind this behavior though, is because named exports are rarely used in *.vue files (they can always be extracted into a separate *.js file instead), but the normalizing behavior can make async Vue components easier to write. Consider:

  // 8.x & ^9.3 behavior
  const Foo = resolve => require(['./Foo.vue'], resolve)
  

  vs. without normalizing:

  // 9.1 & 9.2 behavior
  const Foo = resolve => require(['./Foo.vue'], m => resolve(m.default))
  

  Sorry if this caused confusion if you are currently using 9.2 with async components.

• generated render functions are now beautified for easier debugging.

• Now properly supports ES6 named exports