vueify-next

> Browserify transform for Vue.js components, with scoped CSS and component hot-reloading. Fork based on the original vueify package by Evan You.

Note: This package is now updated to utilize babel7, so please make sure your project is also using that babel version when using this fork.

This transform allows you to write your components in this format:

`` html
// app.vue



`

You can also mix preprocessor languages in the component file:

` vue
// app.vue



`

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.

Using Babel

Vueify is pre-configured to work with Babel 7 using preset-env. Simply install Babel-related dependencies:

` bash
npm install\
@babel/core\
@babel/preset-env\
--save-dev
`

Then create a .babelrc:

` json
{
"presets": ['@babel/preset-env']
// ... don't forget to add env presets!
}
`

And voila! You can now write ES2015+ in your *.vue files.

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)
- jade
- pug
- coffee-script (use coffee in config section)

PostCSS

Vueify uses PostCSS for scoped CSS rewrite. You can also provide your own PostCSS plugins! See config section 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

`

Into the following:

` html


`

$3

1. You can include both scoped and non-scoped styles in the same component.

2. The following will be affected by both the parent's scoped CSS and the child's scoped CSS:
- A child component's root node
- Content inserted to a child component via

Hot Reload

To enable hot component reloading, you need to install the browserify-hmr plugin:

` bash
npm install browserify-hmr --save-dev
watchify -p browserify-hmr index.js -o bundle.js
`

You can scaffold a hot-reload enabled project easily using vue-cli and the this template.

CSS Extraction

By default, the CSS in each component is injected into the page using a