vue-loader

What is vue-loader?

vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs). It provides the ability to transform and load .vue files directly into webpack. It handles the parsing of .vue files, which can contain template, script, and style elements, and it applies other webpack loaders to the respective parts, such as babel-loader for the script section and css-loader for the style section.

What are vue-loader's main functionalities?

Parsing Single-File Components

vue-loader parses .vue files, extracting the script, template, and style sections. This code snippet shows how to configure webpack to use vue-loader for .vue files.

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

Scoped CSS

vue-loader enables scoped CSS for Vue components, ensuring styles only apply to the current component. The code sample shows a scoped style block within a .vue file.

<style scoped>
p[data-v-f3f3eg9] {
  color: red;
}
</style>

Hot Module Replacement

vue-loader supports Hot Module Replacement (HMR) for Vue components, allowing components to be updated in real-time without a full page reload. The code sample demonstrates how to set up HMR for a Vue component.

if (module.hot) {
  module.hot.accept('./components/MyComponent.vue', function () {
    // Any required update logic...
  })
}

Pre-Processors

vue-loader allows the use of pre-processors like SCSS, LESS, and Stylus within the style section of a .vue file. The code sample shows how to use SCSS within a Vue component.

<style lang="scss">
$color: red;
.style-class {
  color: $color;
}
</style>

Asset URL Handling

vue-loader can transform asset URLs found in a Vue component's template into webpack module requests. The code sample demonstrates how to require an image asset in a .vue file's template.

<template>
  <img :src="require('./assets/logo.png')">
</template>

Other packages similar to vue-loader

react-hot-loader

react-hot-loader is similar to vue-loader in that it provides hot module replacement for React components. However, it is specific to React and does not handle single-file components like vue-loader does for Vue.

angular2-template-loader

angular2-template-loader is a loader for webpack that inlines HTML and CSS into Angular components. It is similar to vue-loader in that it processes component templates and styles, but it is designed for Angular rather than Vue.

svelte-loader

svelte-loader is a webpack loader for Svelte components, which are single-file components similar to Vue's SFCs. It compiles Svelte components into JavaScript modules, much like vue-loader does for Vue components.

README

vue-loader

Vue.js component loader for Webpack, using Webpack loaders for the parts.

It allows you to write your components in this format:

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>

You can also mix preprocessor languages in the component file:

// app.vue
<style lang="stylus">
.red
  color #f00
</style>

<template lang="jade">
h1(class="red") {{msg}}
</template>

<script lang="coffee">
module.exports =
  data: ->
    msg: 'Hello world!'
</script>

And you can import using the src attribute (note that there's no need for a lang attribute here, as Webpack will be used to determine which loader applies):

<style src="style.styl"></style>

Usage

Config Webpack:

// webpack.config.js
module.exports = {
  entry: "./main.js",
  output: {
    filename: "build.js"
  },
  module: {
    loaders: [
      { test: /\.vue$/, loader: "vue-loader" },
    ]
  }
}

And this is all you need to do in your main entry file:

// main.js
var Vue = require('vue')
var appOptions = require('./app.vue')
var app = new Vue(appOptions).$mount('#app')

Pre-Processors

By default vue-loader needs html-loader, css-loader and style-loader as peer dependencies. In order to use pre-processors, you need to install the corresponding Webpack loader for that language.

Note For template pre-processors, use template-html-loader plus the raw templating engine. For example to use jade, you will need to install both template-html-loader and jade instead of jade-loader.

Loader configuration

By default, vue-loader will try to use the loader with the same name as the lang attribute, but you can configure which loader should be used.

For example, to extract out the generated css into a separate file, use this configuration:

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var vue = require("vue-loader");

module.exports = {
  entry: "./main.js",
  output: {
    filename: "build.js"
  },
  module: {
    loaders: [
      {
        test: /\.vue$/, loader: vue.withLoaders({
          css: ExtractTextPlugin.extract("css"),
          stylus: ExtractTextPlugin.extract("css!stylus")
        })
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].css")
  ]
}