Base Components - Ionic/Vue best practice

Just starting out with Ionic/Vue having been working with Ionic/Angular for a few years. Trying to get to grips with some best practices early on.

To save importing and registering the following in every page …

IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar

…I have created a BasePage component which imports these and which I have registered globally. I can then utilise this base component in any page like this:

<template>
  <base-page pageTitle="My Page">
  </base-page>
</template>

I’m assuming this is good practice? Would it then make sense to create other base components in the same way e.g BaseModal, BaseList, BaseForm and so on and (presumably) making good use of Vue slots in these base components?

1 Like

The docs go over a slightly easier way to do global component registration: https://ionicframework.com/docs/vue/quickstart#global-component-registration

One downside to global component registration is that it can unnecessarily increase the amount of JavaScript that your users have to download. Additionally, it can increase the final bundle size produced by Webpack.

That being said, it you are only registering a handful of components or your app is small/medium in size, this may be an acceptable tradeoff.

1 Like

This is just my opinion

I have been building apps with ionic for quite a while and I have never really found much value in creating base components… It seems more of one of those things that saves me a few seconds of typing but as they say, the juice just isn’t worth the squeeze. Unless you are creating your own component library that you are going to repeatedly use in multiple other applications… but even then I still don’t get the value in the long term

4 Likes