# vueify-bolt [](https://circleci.com/gh/vuejs/vueify) [](http://badge.fury.io/js/vueify)
> forked from vuejs/vueify
Add [Asset URL Handling](https://vue-loader.vuejs.org/zh-cn/configurations/asset-url.html)
# vueify
> [Browserify](http://browserify.org/) transform for [Vue.js](http://vuejs.org/) components, with scoped CSS and component hot-reloading.
**NOTE: master branch now hosts version ^9.0, which only works with Vue ^2.0. Vueify 8.x which works with Vue 1.x is in the [8.x branch](https://github.com/vuejs/vueify/tree/8.x).**
This transform allows you to write your components in this format:
``` html
// app.vue
{{msg}}
```
You can also mix preprocessor languages in the component file:
``` vue
// app.vue
h1(class="red") {{msg}}
```
And you can import using the `src` attribute:
``` html
```
Under the hood, the transform 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 `
```
If you are using `vueify` in Node:
``` js
var fs = require("fs")
var browserify = require('browserify')
var vueify = require('vueify')
browserify('./main.js')
.transform(vueify)
.bundle()
.pipe(fs.createWriteStream("bundle.js"))
```
## Building for Production
Make sure to have the `NODE_ENV` environment variable set to `"production"` when building for production! This strips away unnecessary code (e.g. hot-reload) for smaller bundle size.
If you are using Gulp, note that `gulp --production` **does not** affect vueify; you still need to explicitly set `NODE_ENV=production`.
## ES2015 with Babel
Vueify is pre-configured to work with Babel. Simply install Babel-related dependencies:
``` bash
npm install\
babel-core\
babel-preset-es2015\
--save-dev
```
Then create a `.babelrc`:
``` json
{
"presets": ["es2015"]
}
```
And voila! You can now write ES2015 in your `*.vue` files. Note if you want to use ES2015 on normal `*.js` files, you will also need [babelify](https://github.com/babel/babelify).
You can also configure babel with the `babel` field in `vue.config.js`, which will take the highest priority.
## Enabling Other Pre-Processors
For other pre-processors, you also 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`.
These are the preprocessors supported by vueify out of the box:
- stylus
- less
- scss (via `node-sass`, use `sass` in [config section](#configuring-options))
- jade
- pug
- coffee-script (use `coffee` in [config section](#configuring-options))
## PostCSS
Vueify uses PostCSS for scoped CSS rewrite. You can also provide your own PostCSS plugins! See [config section](#configuring-options) below for an example.
## Configuring Options
Create a `vue.config.js` file at where your build command is run (usually the root level of your project):
``` js
module.exports = {
// configure a built-in compiler
sass: {
includePaths: [...]
},
// provide your own postcss plugins
postcss: [...],
// register custom compilers
customCompilers: {
// for tags with lang="ts"
ts: function (content, cb, compiler, filePath) {
// content: content extracted from lang="ts" blocks
// cb: the callback to call when you're done compiling
// compiler: the vueify compiler instance
// filePath: the path for the file being compiled
//
// compile some TypeScript... and when you're done:
cb(null, result)
}
}
}
```
Example using custom PostCSS plugin:
``` js
var cssnext = require('cssnext')
module.exports = {
postcss: [cssnext()]
}
```
Alternatively, if you are using `vueify` in Node and don't want to create a `vue.config.js` file:
``` js
var fs = require("fs")
var browserify = require('browserify')
var vueify = require('vueify')
// apply custom config
vueify.compiler.applyConfig({
// ...same as in vue.config.js
})
browserify('./main.js')
.transform(vueify)
.bundle()
.pipe(fs.createWriteStream("bundle.js"))
```
Or simply pass configuration object to `vueify` (in Node) (for instance to set sass search paths as in the following example):
``` js
var fs = require("fs")
var browserify = require('browserify')
var vueify = require('vueify')
browserify('./main.js')
.transform(vueify, {
sass: {
includePaths: [...]
},
// ...same as in vue.config.js
})
.bundle()
.pipe(fs.createWriteStream("bundle.js"))
```
## Scoped CSS
When a `