I have an application written in AngularJS (v1) that I keep adding things to. Nowadays I prefer to write new code for Vue.js rather than AngularJS but rewriting the entire AngularJS application is out of the question.
However, when the need shows up for a new Page (controller in AngularJS) it is quite simple to write a Vue-component instead.
The AngularJS-html looks like this:
<div ng-if="page.showVue" id="{{ page.getVueId() }}"></div>
You may not have exactly “page” but if you have an AngularJS-application you know how to do this.
Your parent Angular controller needs to initiate Vue.
page.showVue = true; var vue = null; var vueid = null; page.getVueId = function() { if ( !vueid ) { vueid = 'my_vue_component_id'; var vueload = { el: '#' + vueid, template : '<my_vue_component />', data : {} }; $timeout(function() { vue = new Vue(vueload); }); } return vueid; };
At some point you may navigate away from this vue page and then you can run the code:
vue.$destroy(); page.showVue = false; vue = null; vueid = null;
The way everything works is that when Angular wants to “show Vue” it sets page.showVue=true. This in turn activates the div, which needs an ID. The call to page.getVueId() will generate a Vue component (once), but initiate it only after Angular has shown the parent div with the correct id (thanks to $timeout).
You may use a router or have several different Vue-pages in your Angular-application and you obviously need to adjust my code above for your purposes (so every id is unique, and every component is initatied once).
I suppose (but I have not tried) that it is perfectly fine to have several different Vue-components mounted on different places in your Angular application. But I think you are looking for trouble if you want Vue to use (be a parent for) Angular controllers or directives (as children).
Vue.js is small enough that this will come at a quite acceptable cost for your current Angular application and it allows you to write new pages or parts in Vue in an existing AngularJS application.
0 Comments.