{"id":11395,"library":"ngVue","title":"Use Vue Components in Angular 1.x","description":"ngVue is a JavaScript module designed to integrate Vue 2 components within AngularJS 1.x applications. It provides a bridge, enabling developers to use Vue's reactive data binding and component-based architecture within existing Angular 1.x codebases. This allows for a gradual migration of view layers from Angular 1.x to Vue 2, addressing common performance bottlenecks related to Angular's scope watchers and offering a more predictable one-way data flow. The current stable version is 2.2.1. While the project sees occasional maintenance releases to address minor issues and improve compatibility (e.g., ESM support), its primary use case targets older, established Angular 1.x applications rather than new development. Key differentiators include its `vue-component` directive and `createVueComponent` factory, specifically tailored for interop between these two legacy frameworks. For Vue 3 support, users are explicitly directed to use the separate `ngVue3` package.","status":"maintenance","version":"2.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/ngVue/ngVue","tags":["javascript","migration","vue","angular","ng","components","ngvue"],"install":[{"cmd":"npm install ngVue","lang":"bash","label":"npm"},{"cmd":"yarn add ngVue","lang":"bash","label":"yarn"},{"cmd":"pnpm add ngVue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the host AngularJS 1.x environment.","package":"angular","optional":false},{"reason":"Provides the Vue 2 component rendering capabilities.","package":"vue","optional":false}],"imports":[{"note":"The `ngVue` package exports itself as an Angular module that registers globally when imported/required. The Angular application then depends on the string literal `'ngVue'`.","wrong":"const ngVue = require('ngVue');\nangular.module('yourApp', [ngVue]);","symbol":"ngVue (module registration)","correct":"import 'ngVue';\nangular.module('yourApp', ['ngVue']);"},{"note":"This factory is a named export, typically injected into Angular services or controllers to programmatically convert Vue component definitions into Angular-compatible directives.","wrong":"import createVueComponent from 'ngVue';","symbol":"createVueComponent","correct":"import { createVueComponent } from 'ngVue';"},{"note":"Specific plugins, like the Redux integration, often register themselves as separate Angular modules and are imported for their side-effects, making their module name available for Angular dependency.","wrong":"import { ngVueReduxPlugin } from 'ngVue/plugins/redux';","symbol":"ngVueReduxPlugin (example)","correct":"import 'ngVue/plugins/redux';\nangular.module('yourApp', ['ngVue', 'ngVueReduxPlugin']);"}],"quickstart":{"code":"import angular from 'angular';\nimport Vue from 'vue';\nimport 'ngVue';\n\n// Define a simple Vue component\nconst MyGreetingComponent = {\n  template: `\n    <div>\n      <h3>Hello from Vue!</h3>\n      <p>{{ message }}</p>\n      <button @click=\"emitEvent\">Click me (Vue)</button>\n    </div>\n  `,\n  props: ['message'],\n  methods: {\n    emitEvent() {\n      this.$emit('vue-clicked', 'Hello from Vue event!');\n    }\n  }\n};\n\n// Register ngVue and define the Angular app\nangular.module('myApp', ['ngVue'])\n  .controller('MyController', function($scope, $rootScope, createVueComponent) {\n    // Expose the Vue component to ngVue via $rootScope.components\n    // This is a common pattern for ngVue to find components by name\n    $rootScope.components = {\n      MyGreetingComponent: MyGreetingComponent\n    };\n\n    $scope.angularMessage = 'Data from Angular scope.';\n    $scope.vueData = {\n      message: 'This prop is passed from Angular to Vue.'\n    };\n    $scope.vueEvents = {\n      'vue-clicked': function(payload) {\n        console.log('Vue component clicked! Payload:', payload);\n        alert('Vue component received event: ' + payload);\n      }\n    };\n  });\n\n// To use in HTML (assuming an index.html file):\n// <div ng-app=\"myApp\" ng-controller=\"MyController\">\n//   <h2>Angular App with Vue Component</h2>\n//   <p>Message from Angular: {{ angularMessage }}</p>\n//   <vue-component name=\"MyGreetingComponent\" v-props=\"vueData\" v-on=\"vueEvents\"></vue-component>\n// </div>","lang":"javascript","description":"Demonstrates how to integrate a Vue 2 component into an AngularJS 1.x application using `ngVue`, passing props and handling events."},"warnings":[{"fix":"If migrating to Vue 3, install `@jaredmcateer/ngvue3` and refactor component integration accordingly. Do not attempt to use `ngVue` with Vue 3.","message":"ngVue is specifically designed for Vue 2 and AngularJS 1.x. For applications targeting Vue 3, users *must* switch to the separate `ngVue3` package, as `ngVue` is not compatible with Vue 3.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Upgrade to `ngVue@2.2.0` or later for significantly improved and more robust ESM compatibility. If stuck on an older version, consider using CommonJS imports or a bundler configuration that specifically handles legacy module formats.","message":"Earlier versions of ngVue (2.0.0 to 2.1.0) had incomplete or broken ESM (ECMAScript Module) support, which could lead to build failures or runtime errors when bundling with modern tools. This was primarily due to incorrect `exports` field in `package.json`.","severity":"breaking","affected_versions":">=2.0.0 <2.1.1"},{"fix":"Thoroughly test applications when upgrading from `ngVue` versions prior to 2.0.0, especially those using complex component interactions or the Vue 2 Composition API features.","message":"Version 2.0.0 introduced support for Vue 2 Composition API. While described as having no *expected* breaking changes, this was a significant internal refactor. Existing components or integrations might exhibit subtle behavioral differences or require minor adjustments if they relied on specific internal behaviors of `ngVue` before this update.","severity":"gotcha","affected_versions":"<2.0.0"},{"fix":"Upgrade `ngVue` to version 1.7.8 or later to resolve the memory leak issue.","message":"Versions of `ngVue` prior to 1.7.8 had a known memory leak issue related to the mounted lifecycle hook of Vue components, which could cause performance degradation in long-running Angular 1.x applications with a high turnover of Vue components.","severity":"gotcha","affected_versions":"<1.7.8"},{"fix":"Ensure all custom events emitted by Vue components integrated with `ngVue` are defined and emitted using kebab-case (e.g., `my-event`) rather than camelCase (e.g., `myEvent`).","message":"Before version 2.2.1, a deprecation warning related to camelCase event naming styles could appear during bootstrapping. Although the specific warning was removed, it's generally best practice to use kebab-case for custom events in Vue components exposed through `ngVue` to ensure consistency and avoid potential issues with HTML attribute parsing.","severity":"deprecated","affected_versions":"<2.2.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade `ngVue` to version 1.7.5 or later. If using an older version and a bundler, ensure `process` is properly polyfilled or mocked for browser builds.","cause":"ngVue versions prior to 1.7.5 attempted to access the Node.js `process` global in browser environments, leading to errors.","error":"Uncaught ReferenceError: process is not defined"},{"fix":"Upgrade `ngVue` to version 1.7.4 or later to fix the logger initialization logic.","cause":"This error occurred in `ngVue` versions prior to 1.7.4 when the internal logger attempted to call a `warn` method on an object that did not have it defined.","error":"Uncaught TypeError: e.warn is not a function"}],"ecosystem":"npm"}