Browserify transform for Vue.js 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.
This transform allows you to write your components in this format:
// app.vue
<style>
.red {
color: #f00;
}
</style>
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
export default {
data () {
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:
<style lang="stylus" src="style.styl"></style>
Under the hood, the transform will:
insert-css module.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. Starting in 7.0.0, @import in LESS, SASS and Stylus files can be either relative to your build tool root working directory, or to the file being edited. Or one can set import paths in options.
npm install vueify --save-dev
browserify -t vueify -e src/main.js -o build/build.js
And this is all you need to do in your main entry file:
// main.js
var Vue = require('vue')
var App = require('./app.vue')
new Vue({
el: '#app',
render: function (createElement) {
return createElement(App)
}
})
In your HTML:
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
If you are using vueify in Node:
var fs = require("fs")
var browserify = require('browserify')
var vueify = require('vueify')
browserify('./main.js')
.transform(vueify)
.bundle()
.pipe(fs.createWriteStream("bundle.js"))
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.
Vueify is pre-configured to work with Babel. Simply install Babel-related dependencies:
npm install\
babel-core\
babel-preset-es2015\
--save-dev
Then create a .babelrc:
{
"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.
You can also configure babel with the babel field in vue.config.js, which will take the highest priority.
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:
node-sass, use sass in config section)coffee in config section)Vueify uses PostCSS for scoped CSS rewrite. You can also provide your own PostCSS plugins! See config section below for an example.
Create a vue.config.js file at where your build command is run (usually the root level of your project):
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:
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:
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):
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"))
When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM, but doesn't require any polyfills. It is achieved by transforming the following:
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
Into the following:
<style>
.example[_v-1] {
color: red;
}
</style>
<template>
<div class="example" _v-1>hi</div>
</template>
You can include both scoped and non-scoped styles in the same component.
The following will be affected by both the parent's scoped CSS and the child's scoped CSS:
<slot>To enable hot component reloading, you need to install the browserify-hmr plugin:
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.
By default, the CSS in each component is injected into the page using a <style> tag. This works well in most scenarios and enables CSS hot-reloading during development. However, in some cases you may prefer extracting all component CSS into a single file for better performance. To do that, you will need to add the CSS extraction browserify plugin.
Via CLI:
browserify -t vueify -p [ vueify/plugins/extract-css -o dist/bundle.css ] main.js
Via API:
browserify('./main.js')
.transform('vueify')
.plugin('vueify/plugins/extract-css', {
out: 'dist/bundle.css' // can also be a WritableStream
})
.bundle()
This only works for vueify 9+. For Vue 1.x / vueify 8.x you can use vueify-extract-css.
When building for production, follow these steps to ensure smaller bundle size:
Make sure process.env.NODE_ENV === "production". This tells vueify to avoid including hot-reload related code.
Apply a global envify transform to your bundle. This allows the minifier to strip out all the warnings in Vue's source code wrapped in env variable conditional blocks.
The compiler API (originally vue-component-compiler) is also exposed:
var compiler = require('vueify').compiler
// filePath should be an absolute path
compiler.compile(fileContent, filePath, function (err, result) {
// result is a common js module string
})
Currently there are syntax highlighting support for Sublime Text, Atom, Vim, Visual Studio Code and Brackets. Contributions for other editors/IDEs are highly appreciated! If you are not using any pre-processors in Vue components, you can also get by by treating *.vue files as HTML in your editor.
Please see the Releases page for changes in versions ^9.0.0.
FAQs
Vue component transform for Browserify
The npm package vueify receives a total of 3,825 weekly downloads. As such, vueify popularity was classified as popular.
We found that vueify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.