vue-loader

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>

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.

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 syntax definition for enabling language hihglighting/support in these embbeded code blocks: https://gist.github.com/yyx990803/9194f92d96546cebd033

Example

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

Todos

• Tests
• Browserify transform (vueify?)

Similar packages

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.