vue-multi-loader

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

This code has been merged into the offical vue-loader.
Last updated 5 years ago by sjoerd_visscher .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-multi-loader 
SYNC missed versions from official npm registry.

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

Loader configuration

By default, vue-multi-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-multi-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")
  ]
}

Current Tags

  • 0.0.5                                ...           latest (5 years ago)

5 Versions

  • 0.0.5 [deprecated]           ...           5 years ago
  • 0.0.4 [deprecated]           ...           5 years ago
  • 0.0.3 [deprecated]           ...           5 years ago
  • 0.0.2 [deprecated]           ...           5 years ago
  • 0.0.1 [deprecated]           ...           5 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (3)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |