Vueify: Browserify Transform for Vue Components

9.4.1 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

error Error: Cannot find module 'vue' ↓

cause 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.

error Warning: Functional components are not supported in *.vue files. ↓

cause 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 Error: vueify only works with Vue 2.0+ ↓

cause 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.

error (node:XXXXX) DeprecationWarning: Using a callback with instantiating an AsyncResource is deprecated. Please use the 'asyncResource.runInAsyncScope()' method instead. ↓

cause 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.

Warnings

breaking Vueify 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`.

gotcha For 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.

gotcha Vue 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.

deprecated Vueify 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`.

Install

npm install vueify

yarn add vueify

pnpm add vueify

Imports

Vue component import
wrong
```
import App from './app.vue'
```
correct
```
var App = require('./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
wrong
```
webpack src/main.js -o build/build.js --module-bind vueify
```
correct
```
browserify -t vueify -e src/main.js -o build/build.js
```
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

wrong

import { transform } from 'vueify'; // Incorrect for programmatic use with Browserify's API

correct

const browserify = require('browserify');
const vueify = require('vueify');
browserify('./main.js').transform(vueify).bundle().pipe(fs.createWriteStream('bundle.js'))

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.

Quickstart

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);
  });