Using individual components with Vue 3

[lahdekorpi]

Hi!

I've been playing around with the Vue 3 implementation on the dev branch and was curious if there is a way to use individual components, like ion-card, ion-button, etc without initializing IonicVue and createRouter? I may have missed it but the readme was a bit unclear on this. Just to clarify, the instructions on the readme work great if you use it as intended there, but I would like to use Vue's router and only need a few small components.

Thanks for the implementation and keep up the great work!

[michaeltintiuc]

Thanks for the kind words! Yes, you can omit the router, but you still need to initialize Ionic via app.use(IonicVue) this is where all the web-components are registered etc, you can however import only the components you need making your build size rather small. If you app doesn't require a router, that's fine, don't use it. Currently the vue-router will still be pulled in as a dependency, due to some TypeScript type dependency issues, but it is soon to be fixed and it should make the build size even smaller for apps that don't require routing. I am releasing a new version right now that will fix Ionic initialization without a router, as it turned out Vue doesn't await for plugin install functions, so with the next version of ionic/vue you'd have to do:

const app = createApp(App).use(IonicVue, { mode: 'ios' })

IonicVue.isReady().then(() => {
  app.mount("#app");
});

[michaeltintiuc]

To be clear, you can use the official VueRouter without any issues, just use <router-view /> instead of <ion-router-view /> it's a drop-in replacement