vue-loader

Note

This release is not tagged as latest on npm. You will need to explicitly install it as vue-loader@next.

New

• Supports Vue.js 2.0!

Breaking Changes

• Does not work with Vue.js core 1.x, due to the different template compilation requirements.

• Babel no longer required as peer depdendency

  With this change, npm will no longer complain about missing peer dependencies if you happen to use, say, CoffeeScript or plain ES5 in your vue components and don't actually need Babel.

  If babel-loader doesn't exist as a peer dependency, vue-loader will not attempt to transpile content inside <script> tags in Vue components (they are treated as plain ES5). To make vue-loader ES2015-aware, simply install and configure babel-loader and other babel related packages as you normally would. vue-loader will automatically detect their presence and applies babel transformation to Vue components.

• Removed CSS autoprefixing

  This is not strictly within the scope of vue-loader, and in most cases you will need to configure it with targeted browsers anyway. Many PostCSS-based frameworks have this included as well. Since vue-loader already supports using PostCSS plugins, simply install autoprefixer and pass it to vue-loader as a PostCSS plugin.

• The postcss option now supports an object format that allows passing additional options to the PostCSS processor instance. This is useful when you are using PostCSS projects that relies on custom parser/stringifiers: (@esiao)

  postcss: {
    plugins: [...], // list of plugins
    options: {
      parser: sugarss // use sugarss parser
    }
  }
  

New

• New option under vue in webpack config: template. Use this option to pass options to the template rendering engine (via consolidate) if you are using a non-html templating language. (@bopjesvla)

Fixed

• #237 fix nested components scoped CSS id bug (@cjxgm)
• #238 fix the browserify flag incorrectly set to true for hot-reload (@kenvunz)

• Update to use [email protected] now that babel plugins are self-hosted on [email protected] as well.

• You no longer need to install template-html-loader in order to use a templating language like jade. Just install the template engine itself:

  npm install jade
  

  And you're good to go!

• new option: cssSourceMap, defaults to true.

New

• Template validation: vue-loader will now detect and report common syntax errors in Vue templates at compile time.

  Currently there are only 3 rules, but expect more to come in the future.

Fixed

• vue-loader now can properly handle language blocks that have a base indent - it will de-indent the entire block before passing to through other loaders, so that indent-sensitive pre-processors will no longer complain about it.

Breaking

• vue-loader now has a peer dependency on vue-style-loader instead of style-loader. The fork fixes an issue where root-relative urls in CSS files are not loaded properly when CSS source map is enabled.

• Auto-enable CSS source maps if Webpack's devtool option is present.

• Proper source map support showing original *.vue file.

• Work around webpack source map bug when using devtool: eval-source-map

• The vue.postcss option can now also be a function. It will be called with the loader context as the first argument and should return an Array of PostCSS plugins (similar to postcss-loader). (@TerenceZ)

• Added dependency injection support for easier mocking in unit tests. Docs

• Scripts can now use src imports too:

  <script src="./sript.js"></script>
  

• Downgraded babel-runtime peer dependency to 5.x due to:
  • Bugs in babel-runtime 6.x
  • All babel plugins still depend on runtime 5.x, having a top-level 6.x dependency forces duplicate copies of runtime 5.x in every plugin, resulting in the installation using much larger disk space and the build booting much slower.
• More reliable hot-reload for nested child components.

• Improved CSS source map support

• Now supports src import for templates:

  <template src="./template.html"></template>
  

  Works with pre-processors as well:

  <template lang="jade" src="./template.jade"></template>
  

Upgrade to Babel 6. Bumping major version because the babel configuration is now different.

• Users can now provide their own PostCSS plugins: https://github.com/vuejs/vue-loader#postcss

Fixed

• #50 fix @media rules in scoped CSS mode
• #51 fix issues with ExtractTextPlugin

• Fix scoped css for rules with pseudo classes.

New

• Styles are now auto-prefixed by default.

Changed

• Custom loader configuration now uses a vue block in your webpack config:

  module.exports = {
    // entry, output...
    module: {
      loaders: [{
        test: /\.vue$/, loader: 'vue'
      }]
    },
    vue: {
      // configure autoprefixer
      autoprefixer: {
        browsers: ['last 2 versions']
      },
      // custom loaders, this replaces the old vue.withLoaders({})
      loaders: {
        js: 'coffee'
      }
    },
    devtool: '#source-map'
  }