Registry / web-framework / vueify

vueify

JSON →
library9.4.1jsnpmunverified

Vueify is a Browserify transform specifically designed to enable the use of Vue.js single-file components (SFCs) within build pipelines leveraging Browserify. It supports Vue 2.x syntax for templates, scripts, and styles, including scoped CSS and the integration of various pre-processors like Stylus, Less, Sass, PostCSS, Jade, Pug, and CoffeeScript. The current stable version is 9.4.1, with its last significant feature update (v9.0.0) adding Vue 2.0 support. Given the rapid evolution of the JavaScript ecosystem and the current widespread adoption of Vue 3 and modern bundlers like Webpack or Vite, Vueify is largely considered a maintenance-mode solution for existing projects built around Browserify and Vue 2.x. It differentiates itself by providing a comprehensive component compilation and bundling solution tailored specifically for the Browserify ecosystem, allowing developers to write `.vue` files without needing to switch to other build tools.

web-frameworkhttp-networkingserialization
npm install vueify
github ↗package ↗
INSTALL
IMPORT
SIG · VUEIFY
V
vueify
web-frameworkjavascriptv9.4.1
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

Vue component import
✓ var App = require('./app.vue')
✗ import App from './app.vue'
CommonJS `require` syntax is typical for Browserify environments. While Browserify can support ES Modules via transforms like `babelify` or `esmify`, `vueify`'s primary usage and examples rely on `require`.
Browserify CLI transform
✓ browserify -t vueify -e src/main.js -o build/build.js
✗ webpack src/main.js -o build/build.js --module-bind vueify
Vueify is a Browserify-specific transform and is incompatible with other bundlers like Webpack, Vite, or Rollup. It must be applied using Browserify's `-t` (transform) flag.
Browserify Node.js API transform
✓ const browserify = require('browserify'); const vueify = require('vueify'); browserify('./main.js').transform(vueify).bundle().pipe(fs.createWriteStream('bundle.js'))
✗ import { transform } from 'vueify'; // Incorrect for programmatic use with Browserify's API
When used programmatically with Browserify's Node.js API, `vueify` is typically imported as a CommonJS module and passed directly to the `.transform()` method as a function.

This quickstart demonstrates how to programmatically use `vueify` with `browserify` to compile a Vue 2.x single-file component (`app.vue`) into a runnable JavaScript bundle (`bundle.js`) from a main entry file (`main.js`). It includes the creation of a minimal `app.vue` and `main.js` for a self-contained example, followed by the Browserify bundling process and instructions for integrating it into an HTML page.

const fs = require("fs"); const browserify = require('browserify'); const vueify = require('vueify'); const path = require('path'); // Create a sample Vue single-file component (app.vue) const appVueContent = ` <style scoped> .red { color: #f00; } </style> <template> <h1 class="red">{{msg}}</h1> </template> <script> export default { data () { return { msg: 'Hello Browserify and Vue!' } } } </script> `; fs.writeFileSync(path.join(__dirname, 'app.vue'), appVueContent); // Create the main entry point (main.js) const mainJsContent = ` var Vue = require('vue'); var App = require('./app.vue'); new Vue({ el: '#app', render: function (createElement) { return createElement(App); } }); `; fs.writeFileSync(path.join(__dirname, 'main.js'), mainJsContent); // Run Browserify with vueify transform console.log('Bundling with Browserify and vueify...'); browserify('./main.js') .transform(vueify) .bundle() .pipe(fs.createWriteStream(path.join(__dirname, 'bundle.js'))) .on('finish', () => { console.log('Bundle created successfully: bundle.js'); console.log('To view, create an HTML file (e.g., index.html) with:'); console.log(` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vueify Quickstart</title> </head> <body> <div id="app"></div> <script src="bundle.js"></script> </body> </html> `); }) .on('error', (err) => { console.error('Bundling failed:', err.message); });
Debug
Known issues
breakingVueify v9.0.0 and above are only compatible with Vue.js 2.x. It will not work with Vue.js 1.x due to template compilation changes, nor with Vue.js 3.x due to fundamental API and ecosystem shifts.
fix
Ensure your project uses Vue.js 2.x (e.g., `npm install vue@2 --save-dev`). For Vue 1.x, use Vueify 8.x (`npm install vueify@8 --save-dev`). For Vue 3.x, use modern build tools like Vite or Webpack with `vue-loader`.
affects: >=9.0.0
gotchaFor optimal production bundle sizes, the `NODE_ENV` environment variable must be explicitly set to 'production' (e.g., `NODE_ENV=production browserify -t vueify ...`). Simply using `gulp --production` or similar task runner flags will not automatically configure Vueify for production optimizations.
fix
Prefix your build command with `NODE_ENV=production` (e.g., `cross-env NODE_ENV=production browserify ...` or platform-specific equivalent) for production builds.
affects: >=5.0.0
gotchaVue 2.0 functional components are not supported when written directly within `*.vue` files by Vueify. Attempting to define them inline within a SFC's `<script>` block may lead to unexpected behavior or warnings.
fix
Define functional components as separate `.js` files and import them using `require()`, or consider restructuring your components to avoid functional components directly within `*.vue` files when using Vueify.
affects: >=9.2.1
deprecatedVueify targets Vue 2.x and the Browserify ecosystem. While it remains functional for its intended environment, it represents an older tooling paradigm. Newer Vue projects (especially Vue 3.x) predominantly use modern build tools like Vite or Webpack with `vue-loader` for significantly better developer experience and performance.
fix
For new projects or migrating existing ones to Vue 3, strongly consider using modern build tools such as Vite (recommended for Vue 3 projects) or Webpack with `vue-loader`.
affects: *
Errors
Common errors & fixes
Error: Cannot find module 'vue'
Vue.js is not installed, or an incompatible version (e.g., Vue 3.x) is installed for the version of vueify in use.
fix
Run `npm install vue@2 --save-dev` to install the correct Vue 2.x version. Ensure `vue` is listed in your `package.json` dependencies and properly installed in `node_modules`.
Warning: Functional components are not supported in *.vue files.
You are attempting to define a Vue 2.x functional component directly inside the `<script>` block of a `.vue` single-file component, which vueify does not support.
fix
Extract the functional component definition into a separate `.js` file and then `require()` it into your `.vue` component's script section, or refactor the component to be a standard stateful component.
Error: vueify only works with Vue 2.0+
You are using Vueify v9.x with Vue.js 1.x.
fix
Upgrade your project to Vue.js 2.x (e.g., `npm install vue@2 --save-dev`) or downgrade Vueify to a compatible 8.x version (`npm install vueify@8 --save-dev`) if you must remain on Vue 1.x.
(node:XXXXX) DeprecationWarning: Using a callback with instantiating an AsyncResource is deprecated. Please use the 'asyncResource.runInAsyncScope()' method instead.
This warning indicates that an older Node.js asynchronous API usage pattern within vueify's internals is deprecated in your current Node.js version.
fix
Upgrade to vueify v9.4.0 or newer, which contains a fix for this specific deprecation warning. While generally harmless, updating is recommended to remove console noise and ensure future compatibility.
Upgrade
Version history
9.4.1latest on npm
Audit
Dependencies
vuerequiredRuntime Vue.js library (Vue 2.x only)
browserifyrequiredThe core bundler that vueify transforms
babel-coreoptionalRequired for ES2015+ syntax transpilation in script tags (optional since v9.0.0)
babel-preset-es2015optionalRequired for ES2015+ syntax transpilation in script tags (used with babel-core)
stylusoptionalTo process <style lang="stylus"> blocks
lessoptionalTo process <style lang="less"> blocks
node-sassoptionalTo process <style lang="scss"> blocks
pugoptionalTo process <template lang="pug"> blocks
jadeoptionalTo process <template lang="jade"> blocks
coffee-scriptoptionalTo process <script lang="coffee"> blocks
Agent activity
15 hits · last 30 days
node
14
OpenAI (training)
1
Resources
githubhttps://github.com/vuejs/vueify ↗
packagehttps://www.npmjs.com/package/vueify ↗
vueify — npm install vueify · libregistry