Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for ion-tabs #17678

merged 13 commits into from Mar 22, 2019


None yet
3 participants
Copy link

commented Mar 4, 2019

Add support for ion-tabs.

The implementation creates only a single Vue component for ion-tabs, the rest of the functionality is kept as a web component.


  • Ability to pass a string or an array of strings of route names to match tabs against to ion-tab via :routes attribute. This enables us to match multiple routes against a single tab for instances of multi-language URLs or SEO-oriented URLs.

  • Ability to pass an object containing route data to ion-tab-button, identical to router-link via :to attribute. This enables us to have advanced functionality, starting with using route names for redirection and going as far as passing meta and reactive props data to the route object.

  • Ability to pass a custom click handler to ion-tab-button allowing the user to completely override and customize the behaviour.

  • Listen to IonTabsWillChange and IonTabsDidChange events, the latter is emitted after a successful navigation and all of the async hooks have resolved

Events lifecycle

  1. Custom ion-tab-button click handler
  2. IonTabsWillChange event listeners
  3. Vue router update hooks
  4. IonTabsDidChange event listeners
  5. Vue hooks (created, mounted, etc)


Define the routes:

new IonicVueRouter({
  routes: [
      path: '/',
      component: () => import('@/views/Home.vue'),
      children: [
        { path: 'speakers', name: 'speakers' },
        { path: 'schedule', name: 'schedule' },
        { path: 'map', name: 'map' },

Listen to events:

<ion-tabs @IonTabsWillChange="beforeTabChange" @IonTabsDidChange="afterTabChange">

The listener function will receive a single parameter of type { path: string } or Route:

interface Route {
  path: string;
  name?: string;
  hash: string;
  query: Dictionary<string | string[]>;
  params: Dictionary<string>;
  fullPath: string;
  matched: RouteRecord[];
  redirectedFrom?: string;
  meta?: any;

The contents of the object depend on what you provided (or didn't) as value to the :to attribute to the given ion-tab-button element

Provide a click-handler to ion-tab-button

<ion-tab-button tab="settings" @click="foo">...</ion-tab-button>

This function will be called as the first one, before any other hooks or event listeners.

Tab as a wrapper for a Vue component:

<ion-tab tab="schedule">
  <Schedule />

Tab as part of the Vue component:

<Schedule />

<!-- contents of Schedule.vue -->
<ion-tab tab="schedule">

Tabs can be rendered via the router (ionic or base) and can also be stored in cache with keep-alive:

  <router-view />

Since ion-tabs require a router, I have exported the existing ionic/vue router.

Quality of Life improvements:

  • Updated usage docs for ion-tabs
  • Fixed broken controller cache, as it would call the createApi method each time the $ionic getter would be queried.
  • Updates for @ionic/core v4 stable release
  • Minor typing fixes

michaeltintiuc added some commits Mar 2, 2019

michaeltintiuc added some commits Mar 4, 2019

@mhartington mhartington merged commit ee71675 into ionic-team:master Mar 22, 2019

1 check passed

build Workflow: build

Kiku-git added a commit to Kiku-git/ionic that referenced this pull request May 16, 2019

feat(vue): support for ion-tabs (ionic-team#17678)
* Add ion-tabs support, QOL fixes

* Fix @ionic/core version, rebuild core to include docs

* Update router

* Add support for IonTabsWillChange and IonTabsDidChange events

* Update usage docs

* Merge core and user provided click handlers in ion-tab-button

* rename file to be consistent
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.