{"id":18082,"library":"vueify","title":"Vueify: Browserify Transform for Vue Components","description":"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.","status":"maintenance","version":"9.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vueify","tags":["javascript","vue","browserify"],"install":[{"cmd":"npm install vueify","lang":"bash","label":"npm"},{"cmd":"yarn add vueify","lang":"bash","label":"yarn"},{"cmd":"pnpm add vueify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime Vue.js library (Vue 2.x only)","package":"vue","optional":false},{"reason":"The core bundler that vueify transforms","package":"browserify","optional":false},{"reason":"Required for ES2015+ syntax transpilation in script tags (optional since v9.0.0)","package":"babel-core","optional":true},{"reason":"Required for ES2015+ syntax transpilation in script tags (used with babel-core)","package":"babel-preset-es2015","optional":true},{"reason":"To process <style lang=\"stylus\"> blocks","package":"stylus","optional":true},{"reason":"To process <style lang=\"less\"> blocks","package":"less","optional":true},{"reason":"To process <style lang=\"scss\"> blocks","package":"node-sass","optional":true},{"reason":"To process <template lang=\"pug\"> blocks","package":"pug","optional":true},{"reason":"To process <template lang=\"jade\"> blocks","package":"jade","optional":true},{"reason":"To process <script lang=\"coffee\"> blocks","package":"coffee-script","optional":true}],"imports":[{"note":"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`.","wrong":"import App from './app.vue'","symbol":"Vue component import","correct":"var App = require('./app.vue')"},{"note":"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.","wrong":"webpack src/main.js -o build/build.js --module-bind vueify","symbol":"Browserify CLI transform","correct":"browserify -t vueify -e src/main.js -o build/build.js"},{"note":"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.","wrong":"import { transform } from 'vueify'; // Incorrect for programmatic use with Browserify's API","symbol":"Browserify Node.js API transform","correct":"const browserify = require('browserify');\nconst vueify = require('vueify');\nbrowserify('./main.js').transform(vueify).bundle().pipe(fs.createWriteStream('bundle.js'))"}],"quickstart":{"code":"const fs = require(\"fs\");\nconst browserify = require('browserify');\nconst vueify = require('vueify');\nconst path = require('path');\n\n// Create a sample Vue single-file component (app.vue)\nconst appVueContent = `\n<style scoped>\n  .red {\n    color: #f00;\n  }\n</style>\n\n<template>\n  <h1 class=\"red\">{{msg}}</h1>\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      msg: 'Hello Browserify and Vue!'\n    }\n  }\n}\n</script>\n`;\nfs.writeFileSync(path.join(__dirname, 'app.vue'), appVueContent);\n\n// Create the main entry point (main.js)\nconst mainJsContent = `\nvar Vue = require('vue');\nvar App = require('./app.vue');\n\nnew Vue({\n  el: '#app',\n  render: function (createElement) {\n    return createElement(App);\n  }\n});\n`;\nfs.writeFileSync(path.join(__dirname, 'main.js'), mainJsContent);\n\n// Run Browserify with vueify transform\nconsole.log('Bundling with Browserify and vueify...');\nbrowserify('./main.js')\n  .transform(vueify)\n  .bundle()\n  .pipe(fs.createWriteStream(path.join(__dirname, 'bundle.js')))\n  .on('finish', () => {\n    console.log('Bundle created successfully: bundle.js');\n    console.log('To view, create an HTML file (e.g., index.html) with:');\n    console.log(`\n      <!DOCTYPE html>\n      <html lang=\"en\">\n      <head>\n          <meta charset=\"UTF-8\">\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n          <title>Vueify Quickstart</title>\n      </head>\n      <body>\n          <div id=\"app\"></div>\n          <script src=\"bundle.js\"></script>\n      </body>\n      </html>\n    `);\n  })\n  .on('error', (err) => {\n    console.error('Bundling failed:', err.message);\n  });\n","lang":"javascript","description":"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."},"warnings":[{"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`.","message":"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.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Prefix your build command with `NODE_ENV=production` (e.g., `cross-env NODE_ENV=production browserify ...` or platform-specific equivalent) for production builds.","message":"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.","severity":"gotcha","affected_versions":">=5.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=9.2.1"},{"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`.","message":"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.","severity":"deprecated","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"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`.","cause":"Vue.js is not installed, or an incompatible version (e.g., Vue 3.x) is installed for the version of vueify in use.","error":"Error: Cannot find module 'vue'"},{"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.","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.","error":"Warning: Functional components are not supported in *.vue files."},{"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.","cause":"You are using Vueify v9.x with Vue.js 1.x.","error":"Error: vueify only works with Vue 2.0+"},{"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.","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.","error":"(node:XXXXX) DeprecationWarning: Using a callback with instantiating an AsyncResource is deprecated. Please use the 'asyncResource.runInAsyncScope()' method instead."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}