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

Webpack loader for Vue.js components

This loader 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 you'll have to save the vue file to trigger a rebuild since the imported file is not tracked by Browserify as a dependency):

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

Under the hood, the loader will:

• extract the styles, compile them and insert them with the insert-css module.
• extract the template, compile it and add it to your exported options.

You can require() other stuff in the <script> as usual. Note that for CSS-preprocessor @imports, the path should be relative to your project root directory.

Usage

Config Webpack:

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

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')

Enabling Pre-Processors

You need to install the corresponding node modules to enable the compilation. e.g. to get stylus compiled in your Vue components, do npm install stylus --save-dev.

Currently supported preprocessors are:

• stylus
• less
• scss (via node-sass)
• jade
• coffee-script

And here's a SublimeText package for enabling language highlighting/support in these embbeded code blocks.

Example

For an example setup, see vuejs/vue-loader-example.

---

If you use Browserify, there's also vueify that does the same thing.