ngVue

import angular from 'angular'; import Vue from 'vue'; import 'ngVue'; // Define a simple Vue component const MyGreetingComponent = { template: ` <div> <h3>Hello from Vue!</h3> <p>{{ message }}</p> <button @click="emitEvent">Click me (Vue)</button> </div> `, props: ['message'], methods: { emitEvent() { this.$emit('vue-clicked', 'Hello from Vue event!'); } } }; // Register ngVue and define the Angular app angular.module('myApp', ['ngVue']) .controller('MyController', function($scope, $rootScope, createVueComponent) { // Expose the Vue component to ngVue via $rootScope.components // This is a common pattern for ngVue to find components by name $rootScope.components = { MyGreetingComponent: MyGreetingComponent }; $scope.angularMessage = 'Data from Angular scope.'; $scope.vueData = { message: 'This prop is passed from Angular to Vue.' }; $scope.vueEvents = { 'vue-clicked': function(payload) { console.log('Vue component clicked! Payload:', payload); alert('Vue component received event: ' + payload); } }; }); // To use in HTML (assuming an index.html file): // <div ng-app="myApp" ng-controller="MyController"> // <h2>Angular App with Vue Component</h2> // <p>Message from Angular: {{ angularMessage }}</p> // <vue-component name="MyGreetingComponent" v-props="vueData" v-on="vueEvents"></vue-component> // </div>