How to properly pair Vue.js (v1 or v2) with Onsen today?

[Roger]

So I’ve read somewhere in this board a quick way to start off using Vue was by using the old <script> tags. Starting the vue app inside the ons.ready() call seems to do the trick.

But, upon page switch the DOM is rebuilt and the ready callback is not called again, effectively killing vue. This is probably normal, given the DOM magic is happening behind the scenes where Onsen and Vue don’t respect each other out of the box. Also, there’s probably some problem with the scope of the vue app object I should look into.

I haven’t really messed around too much, to be honest; I was hoping someone had some experience to share or a documentation I could check out. I’ve seen there’s a vue-onsenui nodejs module, but it’s not yet available on Monaca and uploading all dependencies it uses is impossible (I can’t really build and debug locally). There’s also the blog post from october promising a core integration with Vue2, which I guess is still under development.

I would very much like to use Vue now. I’m ok with using Vue v1 in the meantime. But I can’t find a way to reliably use it without losing the power from Onsen or the debugging tools from Monaca.

Can someone point me how to integrate Vue on an Onsen project right now?

Thanks in advance for the help.

[munsterlander]

@Roger The easiest way is to just include vue.js in a script tag in my opinion, then use it as I demonstrate in this codepen: https://codepen.io/munsterlander/pen/rWWvNN

This is Vue 2 with Onsen 2 for the most basic features that you would typically use it for. If you want to get more dynamic, then it requires a bit more manipulation.

[Roger]

@munsterlander that’s what I’m doing now. But if you switch the page, using tabs or splitter, all Vue is lost.

What would involve “getting more dynamic”? I don’t mind getting my hands dirty, but I would appreciate some guidance.

Thanks!

[munsterlander]

@Roger So for that, I would / have made sure the model is set to a scoped variable and then on the show event reattach the model to object. You can quickly drop off into callback hell though hence why I say getting more dynamic can be tricky. I have had issues getting tabbar to even work though, so, I typically load Vue only in the show method and use is sparingly. If you can provide an example of what you are trying to do, I can see if I can work up a work-around to get you going.

[Roger]

@munsterlander Thanks though, but I’m already working around this. For now I’m using the splitter but all pages will have to be toggled by Vue (using v-if clauses and such, which surprisingly work with Onsen components!). I will keep the app as far away from the Onsen framework as possible while using its components. That will limit some of the cool functions, but I will be able to have a much leaner code. I despise Angular and React, we wouldn’t be having this conversation if I didn’t.

Suffice to say I need to create a semi-autonomous app for orders with barcode scanning and lots of price calculation and product variations. I’ll want components and vuex and local storage running smoothly, I’ll have to work around certain limitations already solved by onsen, but I guess I’ll have to live with that.

Thanks again!