# vueify [](https://circleci.com/gh/vuejs/vueify) [](http://badge.fury.io/js/vueify)
> [Browserify](http://browserify.org/) transform for [Vue.js](http://vuejs.org/) components, with scoped CSS and component hot-reloading.
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 when `babel-core` installed
Vueify automatically transforms the JavaScript in your `*.vue` components using Babel when it is installed. Write ES2015 today!
The default Babel (6) options used for Vue.js components are:
``` js
{
"presets": ["es2015"],
"plugins": ["transform-runtime"]
}
```
If you wish to override this, you can add a `.babelrc` file at the root of your project:
``` json
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"]
}
```
You can also configure babel with the `babel` field in `vue.config.js`, which will take the highest priority.
## 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`.
These are the built-in preprocessors:
- stylus
- less
- scss (via `node-sass`, use `sass` in [config section](#configuring-options))
- jade
- pug
- coffee-script (use `coffee` in [config section](#configuring-options))
## Autoprefix by Default
Starting in 5.0.0, all CSS output via vueify will be autoprefixed by default. See [config section](#configuring-options) below on customizing the options.
## PostCSS
Vueify uses PostCSS for scoped CSS rewrite and autoprefixing. 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: [...],
// configure autoprefixer
autoprefixer: {
browsers: ['last 2 versions']
},
// configure html minification in production mode
// see https://github.com/kangax/html-minifier#options-quick-reference
htmlMinifier: {
// ...
},
// 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()],
// disable autoprefixer since cssnext comes with it
autoprefixer: false
}
```
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
> Experimental
When a `