CODEWITHSUNDEEP
angularjsvuejs2
Rotem B
Rotem B

Reputation: 1377

Adding vueJS into an existing angular application

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

Upvotes: 6

Views: 3857

Answers (2)

Nicolas P.
Nicolas P.

Reputation: 601

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!

Upvotes: 4

justin.m.chase
justin.m.chase

Reputation: 13675

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.

Upvotes: 2

Related Questions