Bot releases are hidden (Show)
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.)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">
.
postcss.config.js
vue-loader
and postcss-loader
.This is the recommended way to configure PostCSS inside vue-loader
from now on.
vue-loader < 11.0.0
, you will need to unify the two and remove the inline postcss
option passed to vue-loader
.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).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
buble
option. docs
preserveWhitespace
option. docs
esModule
option. docs
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 }">
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.