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.
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')
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.
For an example setup, see vuejs/vue-loader-example.
If you use Browserify, there's also vueify that does the same thing.