Moving from Vue2 to Vue3 with the Options API — what saved my day on 24 March 2022
When covid started, I started learning VueJS, the best decision ever.
I have been learning the Vuetify framework and now with its Titan release that is coming soon, I decided to delve in a little into how to deal with this beast.
Yes, I must say when I head about the Composition API I was a little sceptical after I saw how it worked, and I still need to get my head around it. Problem is, I have just mastered most of what I needed to do with Vuetify and VueJS. That is, creating some awesome apps, easily. For that, I don’t need to know EVERYTHING. I was happy.
I am using a CDN version of Vuetify, and I am using a JavaScript Transpiler called BANano. The intentions are for anyone who wants to, to be able to create webapps, no JavaScript, HTML, CSS knowledge required. Comes in BANanoVuetifyAD3, a tool I have been working on for a while now.
This worked very well with my library, BANanoVuetifyAD3, I mean I even created a multi-company Invoicing WebApp that one can use to create invoices and send them to clients, in PDF. Problem solved.
More Apps were also done, like the ICT Asset Manager, as depicted below.
You can check out the House Rental WebApp here too
So what happened today, 24 March 2022? I have managed to get Vue3 working fine with the Options API, and have been testing it with the Vant Mobile UI framework. I then moved over to Vuetify and applied what I had learned, everything worked well.
Furthermore, I learned how to implement the VueRouter4, navigation guards etc and everything was honky dorry.
So I thought
Then it happened. My UI is not re-active. Everything I had built, UI wise has been working well, callbacks for my subs, click events, watchers to say the least, my UI was not being re-active. I decided to park it.
Then a globe moment arrived a day later. Vue3 supports the Options API, granted, so it means I can do what I did for re-activity in my use case. Tried that, dololo. (Dololo means meh!)
Anyway, to cut a long story short. As much as I don’t remember where I saw it. I came across this piece of wonderful source code. (Has been extended)
In most examples I have seen, there has been nothing about app.mount returning anything. One can assign a variable to it and extract some valuable content. Wow! I console logged data, refs, root, slots etc and aha! My reactivity worked as soon as I updated the vm.$data variable. Problem 1 solved, I was happy.
I then start working on route components and navigation, the router-view and router-links, the UI worked well, again the data was not reactive in all my pages. I found this out when I was trying to implement code to increment a badge that's inside a DIV in my page. It just wouldn't budge. I started goggling, searching, reading documents, hard luck, then when I was just about to give up and my dream going poof, something happened. Stack Overflow.
The life saving answer to a very important question
Vue 3 — Get access to router-view instance in order to call child methods
What a lifesaver!!! After implementing the suggestion and running my experimental code. Wala!!!
The code I needed was this portion.
This helped me to access all the route component page refs easily, as depicted below.
Will I be definitely be able to create successful and awesome Vue3 based webapps with this knowledge? Definitely 110%. Yes, eventually I will learn the Composition API and be comfortable using it (I hope), for now at least, there is no need to raffle a lot of feathers.
Thanks a lot, tony19
