v13.3.0

New

• Scoped CSS support for functional components (requires Vue runtime >= 2.5.0)
• Hot-reload support for functional components

v13.2.1

New Features

• Support transforming srcset to require calls. (#953)

• Add cacheBusting option to allow turning off cache busting for source maps. (#987)

• Adjusted PostCSS configuration API:

postcss.config

• type: Object

• default: undefined

  This field allows customizing PostCSS config in the same way as postcss-loader.

  • postcss.config.path

    Specify a path (file or directory) to load the PostCSS config file from.

    postcss: {
      config: {
        path: path.resolve('./src')
      }
    }

  • postcss.config.ctx

    Provide context to PostCSS plugins. See postcss-loader docs for more details.

Fixed

• #932
• #939

v13.1.0

• Support for compiling templates for functional components. This feature requires vue and vue-template-compiler >= 2.5.0.

  To denote a template that should be compiled as a functional component, add the functional attribute to the template block. Also, props need to be accessed as props.xxx.

  <template functional>
    <div>{{ props.foo }}</div>
  </template>

v13.0.2

• Fix scoped style attribute not being applied with 2.4 ssr optimization

v12.2.2

• Fix scoped style attribute not being applied with 2.4 ssr optimization

v13.0.1

• Fixed template HMR regression in 13.0.0

v13.0.0

New

• Now uses ES modules internally to take advantage of webpack 3 scope hoisting. This should result in smaller bundle sizes.

• Now uses PostCSS@6.

Breaking Changes

• The esModule option is now true by default, because this is necessary for ES-module-based scope hoisting to work. This means the export from a *.vue file is now an ES module by default, so async components via dynamic import like this will break:

  const Foo = () => import('./Foo.vue')

  Note: the above can continue to work with Vue 2.4 + vue-router 2.7, which will automatically resolve ES modules' default exports when dealing with async components. In earlier versions of Vue and vue-router you will have to do this:

  const Foo = () => import('./Foo.vue').then(m => m.default)

  Alternatively, you can turn off the new behavior by explicitly using esModule: false in vue-loader options.

  ---

  Similarly, old CommonJS-style requires will also need to be updated:

  // before
  const Foo = require('./Foo.vue')
  
  // after
  const Foo = require('./Foo.vue').default

• PostCSS 6 might break old PostCSS plugins that haven't been updated to work with it yet.

v12.2.1

• added /deep/ as an alias for >>> as the latter is not recognized as a valid combinator by SASS.

v12.2.0

• <style scoped> now support "deep" selectors that can affect child components using the >>> combinator:

  .foo >>> .bar { color: red; }

  will be compiled into:

  .foo[data-v-xxxxxxx] .bar { color: red; }

• keyframes inside <style scoped> will now become scoped.

  @keyframes foo { ... }
  .animated { animation: foo 1s; }

  will be compiled into

  @keyframes foo-data-v-xxxxxxx { ... }
  .animated { animation: foo-data-v-xxxxxxx 1s; }

  Note: this only works if the keyframes declaration and the animation rules are inside the same <style> block.

v12.1.1

• Allow explicitly turning off 2.4 SSR optimization with new option optimizeSSR: false. This might be necessary for some testing scenarios.