Is this possible?

Ionic Framework Ionic Vue
1

I’m completely new to ionic and my current company has a mobile application built on ionic from a previous developer and he used angular. We’ve been componentizing our current members site with Vue3 and I’d say roughly 80% of it now use them. My direct manager has tasked me with the assignment of building a new version of our mobile app using ionic with vue and he thinks that I can just drop in our components that we have been building and use them. I’ve expressed to him that from what I’ve been reading you use the UI components provided by ionic and then within those components you can choose which flavor of JS you want to use. He seems to think and please I have no idea if he is correct, that you can just use any vue components since the interaction between the mobile device is capacitor which allows just JS.

So can anyone point me in the direction of a tutorial if its possible that you can use ionic and your own vue compoentns and not the UI from ionic. I’m feeling a bit overwhelmed by the assignment and I’m hoping that with the help of this community I can feel a bit better.

2

You don’t need to use Ionic. Capacitor can be installed into any web/JS project. The benefit of using the Ionic Framework is that you can replicate a mobile feel easily. For my app, I use Ionic components like IonButton, IonModal and IonInput, IonAlert in order to get the native feeling but then have custom Vue components for specific things. I also use TailwindCSS to do most of my styling.

I would recommend using Ionic & Capacitor though. Pick and choose the Ionic Framework components you want to use along with dropping in your own components. Another big difference with Ionic is how it handles Vue routing. Check out the docs. It keeps pages alive as you go between them so it feels more native and not slow. A caveat is that you need to make sure you understand the Vue Lifecycle.

2 Likes
3

are there any tutorials on how to just “drop” in a component? I’m looking at the capacitor and ionic documentation and I just want to make sure I am doing it all correctly.

4

Creating an Ionic project with Vue is pretty much a normal Vue project. You create and use components just like any other Vue project. There is nothing special. The only major difference is the routing.

5

No there is not, Those components that you want to drop in needs to be created using StencilJS, then you can import those components into any webapp via npm. https://stenciljs.com/

6

And I don’t think you can just drop in Ionic styled Angular components into Vue. That is pretty like putting BMW parts in an Audi. Won’t fly out-of-the-box

So as per earlier comments/in addition

  • Don’t use Ionic UI, and then make your own Vue stuff (with other UI libraries I reckon) and use CapacitorJS to create a deployment target
  • Use earlier Ionic UI styled Angular components and port them to Vue way of working (single file components, different imports, different syntax for bindings etc). Which basically means means creating an Ionic styled Vue app.

Or go fancy and export the angular components as webcomponents and then import them in the Vue app. Might be too daunting.

Indeed, using Ionic’s Capacitor project is dead simple dropping of compiled/transpiled JS (+web assets) into the container.

Either way, maybe start with a small proof-of-concept to see if you and your manager can align expectations. Before going into a rabbit hole.