Browserify transform for Vue.js components, with scoped CSS and component hot-reloading.
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>
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 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.
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: 'body',
components: {
app: App
}
})
In your HTML:
<body>
<app></app>
<script src="build.js"></script>
</body>
Vueify 4.0+ automatically transforms the JavaScript in your *.vue components using Babel. Write ES2015 today!
The default Babel options used for Vue.js components are:
{
// use babel-runtime library for common helpers
optional: ['runtime'],
// use loose mode for faster builds
loose: 'all',
// disable non-standard stuff (e.g. JSX)
nonStandard: false
}
If you wish to mofidy this, you can add a vue.config.js and configure the option for babel:
// vue.config.js
module.exports = function (vueify) {
vueify.option('babel', {
stage: 0, // use all the fancy stage 0 features!
optional: ['runtime'],
loose: 'all',
nonStandard: false
})
}
Starting in 5.0.0, all CSS output via vueify will be autoprefixed by default. See config section on customizing the options.
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:
node-sass)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: [...]
},
// configure autoprefixer
autoprefixer: {
browsers: ['last 2 versions']
},
// register custom compilers
customCompilers: {
// for tags with lang="ts"
ts: function (content, cb) {
// compile some TypeScript...
cb(null, result)
}
}
}
Experimental
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.
A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
Partials are not affected by scoped styles.
Experimental
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
A full setup example with hot reloading is available at vuejs/vueify-example.
The compiler API (originally vue-component-compiler) is also exposed:
var compiler = require('vueify').compiler
// filePath should be an absolute path, and is optional if
// the fileContent doesn't contain src imports
compiler.compile(fileContent, filePath, function (err, result) {
// result is a common js module string
})
And here's a SublimeText package for enabling language highlighting/support in these embbeded code blocks.
For an example setup using most of the features mentioned above, see vuejs/vueify-example.
If you use Webpack, there's also vue-loader that does the same thing.
Built-in lang for ES2015 has been renamed from es6 to es.
es transforms now uses loose mode and optional runtime by default. This means in addition to installing babel, you should also install babel-runtime.
Templates and CSS are now non-minified by default. To enable minification, run the build with NODE_ENV=production.
Options for built-in pre-processors can now be configured in vue.config.js.
vue-component-compiler has been merged into vueify. It is now exposed as require('vueify').compiler.
FAQs
Vue component transform for Browserify
The npm package vueify receives a total of 4,430 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
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.