vue-loader Documentation

vue-loader allows you to author Vue components using the Single-File Component (SFC) format, which encapsulates <template>, <script>, and <style> in a single .vue file.

Key features include:

• Using different webpack loaders for different blocks (e.g., Sass for <style>, Pug for <template>).
• Support for custom blocks with custom loader chains.
• Treating static assets in <style> and <template> as module dependencies.
• Scoped CSS simulation.
• State-preserving hot-reloading.

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!',
    }
  },
}
</script>

<style>
.example {
  color: red;
}
</style>

For VueLoaderPlugin to work correctly, your Webpack configuration must satisfy the following requirements:

1. Root-level rule for .vue files: There must be at least one rule at the top level of your module.rules array that matches .vue or .vue.html files.
2. Include vue-loader: The rule matching .vue files must include vue-loader in its use array.
3. No oneOf support: The rule matching .vue files cannot use the oneOf property; it must be a standard rule structure.

The VueLoaderOptions interface defines the configuration available to the vue-loader. Use these options to customize how SFCs (Single File Components) are processed, including template compilation, script parsing, and custom element behavior.

interface VueLoaderOptions {
  babelParserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
  transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
  compiler?: TemplateCompiler | string
  compilerOptions?: CompilerOptions
  /** @deprecated */
  reactivityTransform?: boolean
  /** @experimental */
  propsDestructure?: boolean
  /** @experimental */
  defineModel?: boolean
  customElement?: boolean | RegExp
  hotReload?: boolean
  exposeFilename?: boolean
  appendExtension?: boolean
  enableTsInTemplate?: boolean
  experimentalInlineMatchResource?: boolean
  isServerBuild?: boolean
}

If the plugin finds a rule for .vue files but that rule does not actually use vue-loader, it will throw the following error:

[VueLoaderPlugin Error] No matching use for vue-loader is found. Make sure the rule matching .vue files include vue-loader in its use.

The VueLoaderPlugin currently does not support rules that use the oneOf property to match .vue files. If such a rule is detected, it will throw:

[VueLoaderPlugin Error] vue-loader currently does not support vue rules with oneOf.

If the plugin cannot find a rule that matches .vue or .vue.html files in your Webpack configuration, it will throw the following error:

[VueLoaderPlugin Error] No matching rule for .vue files found. Make sure there is at least one root-level rule that matches .vue or .vue.html files.