Skip to content

Using individual components with Vue 3 #150

Closed
@lahdekorpi

Description

@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!

Activity

michaeltintiuc

michaeltintiuc commented on Aug 28, 2020

@michaeltintiuc
Member

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

michaeltintiuc commented on Aug 28, 2020

@michaeltintiuc
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Using individual components with Vue 3 · Issue #150 · ModusCreateOrg/ionic-vue