Adding vueJS into an existing angular application

Question

I have an existing angular application and I want to start changing some of it to a vueJS application.

My application, in dev mode, loads all scripts in the main html file (in production mode its bundled into app.js but I want to start testing to dev mode).

I want to change on of the states to use vue, so I read it's possible in the following way: https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9

However, I want to use a .vue files syntax and I don't know if that's possible without using webpack or any other bundler in dev mode.

So my question is - Is that possible? Can I use .vue files inside my ng app with the current configurations? Furthermore, is there a nice way to webpack only the vue files and components (even though I have to initialize them inside and angular controller as it seems).

If there are any good tutorials for adding vue into angular app, I would love to get them, as I failed finding good ones.

Thanks

.vue files are a format used by vue-loader, an npm package designed specifically for webpack. So, if you want to use .vue files I'm pretty sure you need webpack. — thanksd
– thanksd, Commented Oct 30, 2017 at 14:46

Nicolas P. · Accepted Answer · 2017-11-22 16:54:27Z

4

ngVue member here :)

At Dawex (the company I'm working at), we're using Vue within a big AngularJS application, with ngVue. It's in production for several months now and it works very well. You can find more informations on this article I wrote before last summer: https://medium.com/dailyjs/how-to-migrate-from-angularjs-to-vue-4a1e9721bea8. Hope that helps!

answered Nov 22, 2017 at 16:54

Nicolas P.

6011 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

justin.m.chase · Accepted Answer · 2017-10-30 14:37:52Z

2

That could be tough, because the build for the vue code will basically be a separate application.

One thing you could do is build them as completely different parallel apps, use two build steps, include two javscript files and then use window.postMessage to communicate between the two.

So for example your current application will come to a point where a particular div is to contain vue code instead of angular. You could then post a message from your angular code, telling the vue app to load into that div, e.g.:

window.postMessage({ app: 'vue', bind: '#vue-content' })

The vue app, instead of binding on DOMContentReady would listen to window events, and then bind to the element it receives. It would then communicate back to the host app by posting messages also. This would keep them fairly seperate and allow you to build them independently.

answered Oct 30, 2017 at 14:37

justin.m.chase

13.7k9 gold badges61 silver badges111 bronze badges

3 Comments

Dieterg Over a year ago

I must say, I kind off like this idea. Gave me some inspiration on our migration project as well!

Rotem B Over a year ago

Thanks Justin! Two questions - first, would you do that? would you try to add vue into an existing and pretty large angular application? Second, any thoughts about ngVue?

justin.m.chase Over a year ago

I have not looked at ngVue at all but if someone has already done some work for you may as well check it out. And regarding doing it at all... it seems risky and I would probably rather not do it but if you can't think of a better way to get traction towards moving away from old angular than I would be awfully tempted.

Collectives™ on Stack Overflow

Adding vueJS into an existing angular application

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related