Tabs not working

[rashnk]

im very new to onsen ui, iam trying to add tabs to my page, the template i used is here vue init OnsenUI/vue-cordova-webpack hello-world
i want to add tabs to HomePage component.
so my HomePage look like below

<template>
  <v-ons-page>
    <v-ons-toolbar class="home-toolbar">
      <div class="left">
        <v-ons-toolbar-button @click="$emit('toggleMenu')">
          <v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
        </v-ons-toolbar-button>
      </div>
      <div class="center">{{ msg }}</div>
    </v-ons-toolbar>

    <div class="header">
      <img src="../assets/logo.png">
    </div>

    <v-ons-list-title>Vue.js Essential Links</v-ons-list-title>
    <v-ons-list>
      <v-ons-list-item v-for="item in essentialLinks"
                       @click="goTo(item.link)"
                       :key="item.link">
        <div class="left">
          <v-ons-icon fixed-width
                      :icon="item.icon"></v-ons-icon>
        </div>
        <div class="center">{{ item.label }}</div>
        <div class="right">
          <v-ons-icon icon="fa-external-link"></v-ons-icon>
        </div>
      </v-ons-list-item>
    </v-ons-list>

    <v-ons-list-title>Vue.js Ecosystem</v-ons-list-title>
    <v-ons-row>
      <v-ons-col>
        <v-ons-card @click="goTo('http://router.vuejs.org/')">vue-router</v-ons-card>
      </v-ons-col>
      <v-ons-col>
        <v-ons-card @click="goTo('http://vuex.vuejs.org/')">vuex</v-ons-card>
      </v-ons-col>
    </v-ons-row>
    <v-ons-row>
      <v-ons-col>
        <v-ons-card @click="goTo('http://vue-loader.vuejs.org/')">vue-loader</v-ons-card>
      </v-ons-col>
      <v-ons-col>
        <v-ons-card @click="goTo('https://github.com/vuejs/awesome-vue')">awesome-vue</v-ons-card>
      </v-ons-col>
    </v-ons-row>
    <v-ons-tabbar position="auto"
                  swipeable
                  :modifier="md ? 'autogrow white-content' : null"
                  :on-swipe="md ? onSwipe : null"
                  :tabbar-style="swipeTheme"
                  :tabs="tabs"
                  :index.sync="index"
                  @postchange="showTip($event, 'Tip: Try swiping pages!')"></v-ons-tabbar>
  </v-ons-page>
</template>

<script>
import homePage from './TabHome';
export default {
  name: 'home',
  data() {
    return {
      msg: 'Welcome',
      tabs: [
        {
          label: this.md ? null : 'Camera',
          icon: 'ion-camera, material:md-camera',
          page: homePage,
          theme: red,
          style: this.md ? { maxWidth: '60px' } : {},
          top: -105, // Toolbar + Tabbar heights
        },
        {
          icon: this.md() ? null : 'ion-ios-bell',
          label: 'News',
          page: homePage,
          badge: 7,
          key: 'newsPage',
        },
        // {
        //   icon: this.md() ? null : 'ion-ios-settings',
        //   label: 'Settings',
        //   page: settingsPage,
        //   key: "settingsPage"
        // }
      ],
    };
  },
  methods: {
    goTo(url) {
      window.open(url, '_blank');
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  text-align: center;
}

img {
  max-width: 300px;
}

ons-list-title {
  text-transform: none;
}

ons-list-title:not(:first-of-type) {
  margin-top: 30px;
}

ons-card {
  text-align: center;
}

ons-list-item,
ons-card {
  cursor: pointer;
}
</style>

and a Tab page imported

<template>

  <v-ons-page>
    <p style="text-align: center">
      Welcome home.<br><br>{{ myProp }}
    </p>
  </v-ons-page>

</template>
<script>
export default {
  name: 'home',
  props: ['myProp'],
  data() {},
};
</script>

but im not seeing the tabs title and content, i dont wht went wrong, can some one help me to fix this >?? thanks in advance

[Fran Diox]

@rashnk Welcome! There is already a tutorial about v-ons-tabbar. Have you checked it out? http://tutorial.onsen.io/?framework=vue&category=reference&module=tabbar