Ion-tab missing?

Ionic Framework Ionic Vue
1

Trying to follow the example but getting runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: ion-tab . Was Ion-Tab removed for Vue3 but the docs don’t match or is it deeper that this?

2

are you sure you imported it AND added it as a component?

3

“@ionic/vue”: “^5.4.0”

import {IonTab} from '@ionic/vue' … { "resource": "/home/delaney/work/omega/frontend/src/main.ts", "owner": "typescript", "code": "2724", "severity": 8, "message": "Module '\"../node_modules/@ionic/vue/dist/types\"' has no exported member 'IonTab'. Did you mean 'IonTabs'?", "source": "ts", "startLineNumber": 49, "startColumn": 9, "endLineNumber": 49, "endColumn": 15 }

edit: just tried upgrading to 5.4.4 with no luck.

4

this is just the import… you also need to add it as a component.

also where in the documentation is IonTab ??

<script lang="ts">
import {
  IonTabBar,
  IonTabButton,
  IonTabs, // HERE 
  IonContent,
  IonLabel,
  IonPage,
} from "@ionic/vue";

export default {
  name: "Tabs",
  components: {
    IonContent,
    IonLabel,
    IonTabs, // AND HERE
    IonTabBar,
    IonTabButton,
    IonPage,
  },
  setup() {
    return {};
  },
};
</script>
5

Thanks but I’m talking about <ion-tab/> per the docs, not <ion-tabs/>

6

I think that is an error in the documentation… or they just don’t support creating tabs that way anymore.

This is the format I use when creating tab based applications, it is also how the cli generates tab based applications for ionic-vue

7

Hey there,

With Ionic Vue, you do not need to use ion-tab to define each tab page, you can just create a Vue component as you would in any Vue app.

Take a look at our Tabs starter app for an example: https://github.com/ionic-team/starters/tree/master/vue/official/tabs/src

I will update the docs and its examples so it is clear that you do not need ion-tab.

edit: PR is up: https://github.com/ionic-team/ionic-framework/pull/22510