{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install ngVue"],"cli":null},"imports":["import 'ngVue';\nangular.module('yourApp', ['ngVue']);","import { createVueComponent } from 'ngVue';","import 'ngVue/plugins/redux';\nangular.module('yourApp', ['ngVue', 'ngVueReduxPlugin']);"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}