Vue Template Loader Versions Save

Features

• add compiler option (#58) (fa51333)

Features

• support functional component template (can be enabled with functional: true option) (c26e76f)
• support /deep/ selector along with >>>.
• add optimizeSSR option.
• use @vue/component-compiler-utils internally (#51) (4180d5a)

BREAKING CHANGES

• renamed transformToRequire to transformAssetUrls

Bug Fixes

• avoid using deprecated API of webpack 4 #46

Features

• Add scope id to keyframes name (#43) (63080b1)

New

• Introduce >>> combinator for scoped styles. docs (#33)

Improvements

• Support source map for template and styles (#31)

Breaking Changes

• Leave vue-template-compiler to peerDeps (#20)

Improvements

• #24 Use hash string for a component id based on a file path (#27)

Fixed

• #25 Fix generating wrong import statements on Windows environment (#28)

New

• Disable HMR by using hmr: false option (#15 by @gejgalis)

Fixed

• #13 Fix deprecation warning of loader-utils

New

• Add transformToRequire option. The option allows us to transform asset path in template to require expression as same as vue-loader.

  Example configuration:

  rules: [
    {
      test: /\.html$/,
      loader: 'vue-template-loader',
      options: {
        transformToRequire: { 
          img: 'src'
        }
      }
    }
  ]
  

New

• Allow to load a css file via query

  You can load a css file with template by specifying the file path via query. the css file will be processed by loaders that you specified in webpack config as same as ordinary webpack behavior.

  // ./style.css will be loaded
  import template from './template.html?style=./style.css'
  

• Support vue-loader like scoped styles and CSS Modules

  If you enable scoped flag of vue-template-loader, all styles loaded by query will be scoped like vue-loader. That means unique attribute (like data-v-123) will be added all css selectors and html elements. Note that you have to add enforce: 'post' into rules for style files.

  module.exports = {
    module: {
      rules: [
        {
          test: /\.html$/,
          use: 'vue-template-loader?scoped' // add `scoped` flag
        },
        {
          enforce: 'post', // required
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
  }
  

  If you prefer to use CSS Modules, you can use it by just adding modules flag to css-loader's query. vue-template-loader will add $style property that has hashed classes and you can refer it from a template.

  module.exports = {
    module: {
      rules: [
        {
          test: /\.html$/,
          use: 'vue-template-loader'
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader?modules'] // Enable CSS Modules
        }
      ]
    }
  }
  

  <p :class="$style.foo">Hello</p>