Custom v-ons-tabbar

[Hyeokjune Jeon]

Hello,

I want to custom tabbar.
For example, I have three tabs(home,myprofile.setting), and the other not-tabbed-page not belong to tabs. Sometime I show the content on not-tabbed-page.

I have a question:

1. How to extend VOnsTabbar in my project(webpack.js).
2. How to display the other not-tabbed page(ons-page).

  1 <template>
  2   <ons-tabbar
  3     :on-swipe.prop="onSwipe"
  4     :activeIndex="index"
  5     @postchange.self="$emit('update:index', $event.index)"
  6     v-on="unrecognizedListeners"
  7   >
  8     <div class="tabbar__content">
  9       <div><slot>Here Custom Data</slot></div>
 10       <div>
 11         <slot name="pages">
 12           <component v-for="tab in tabs" v-bind="tab.props" :is="tab.page" :key="(tab.page.key || tab.page.name || _tabKey(tab))" v-on="unrecognizedListeners"></component>
 13         </slot>
 14       </div>
 15     </div>
 16     <div class="tabbar">
 17       <slot>
 18         <v-ons-tab v-for="tab in tabs" v-bind="tab" :key="_tabKey(tab)"></v-ons-tab>
 19       </slot>
 20       <div class="tabbar__border"></div>
 21     </div>
 22   </ons-tabbar>
 23 </template>
 24
 25 <script>
 26   import { VOnsTabbar } from 'vue-onsenui';
 27   export default {
 28     extends: VOnsTabbar,
 29   };
 30 </script>

I have got error messages if extending:

Please help me!!!
Thank you.

[Fran Diox]

@Hyeokjune-Jeon I don’t think import { VOnsTabbar } from 'vue-onsenui'; is exactly importing what you think. vue-onsen does not export components, only an installable plugin. You can try to get the component from Vue’s installed components: Vue.options.components['v-ons-tabbar'].