How to use Onsen UI tabbar with Vue single file components

Question

I'm using Vue Onsen UI and trying to render a Vue single file component for each tab.

In the documentation here, they make use of template in a single page. Which is not very reusable. I want to be able to import custom component and render that.

Here is something that I'm trying to do which doesn't seem to work.

<template lang="html">
  <v-ons-page>
    <!-- top tab bar -->
    <v-ons-tabbar position="top" :index="0">
      <v-ons-tab label="Browse" page="TaskList">
      </v-ons-tab>
      <v-ons-tab label="Second">
      </v-ons-tab>
    </v-ons-tabbar>
  </v-ons-page>
</template>


<script>
import TaskList from './TaskList';

export default {
  template: '#main',
  components: {
    'task-list': TaskList,
  },
};
</script>

<style lang="scss">
</style>

Can you suggest anything that I should try?

Answer 1

Instead of using tab objects that reference the components directly, use the :tabs property of the tabbar to set up the pages:

<template lang="html">
  <v-ons-page>
    <v-ons-tabbar position="top" :index="0" :tabs="tabs">
    </v-ons-tabbar>
  </v-ons-page>
</template>

<script>
import TaskList from './TaskList';
import SecondPage from './SecondPage';

export default {
  template: '#main',
  data: function () {
        return {
            tabs: [
                {label: 'Browse', page: TaskList},
                {label: 'Second', page: SecondPage}
            ]
        }
    }
};
</script>

Also, make sure the root element of the components you reference in the page property are <v-ons-page> elements.

Answer 2

I was having the same difficulty with the following syptoms:

• Tabs were not appearing at all
• No errors in CLI or in console

Note that I was also using the "Hello World" app that is generated from the CLI (vue init OnsenUI/vue-pwa-webpack hello-world)

Resolution

It was pretty simple in the end: there is a file in the root of the folder called vue-onsen-components.js which has all of the components and some of them are commented out. I had to uncomment the following lines and then the tabs appeared:

export { default as VOnsTab } from 'vue-onsenui/esm/components/VOnsTab' export { default as VOnsTabbar } from 'vue-onsenui/esm/components/VOnsTabbar'