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?

score 2 · Answer 1 · answered Feb 22 '18 at 14:36

2

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.

answered Feb 22 '18 at 14:36

Andy Miller

849
1
9
21

This works. But... how to solve `Duplicate keys detected` caused by my `page` in `tabs` are all the same? – Ray Eldath Jul 08 '18 at 07:48
1

I don't think thats related. That's a Vue error stating that you're trying to use a `v-for` repeat and the `:key` property without specifying unique values. Check out [the Vue.js documentation page here.](https://vuejs.org/v2/guide/list.html#key) Make sure you use unique keys in the :key property and the warning should go away. – Andy Miller Jul 10 '18 at 15:06
Ah... Sorry for that. It's partially a Vue staff. [Onson UI # 2471](https://github.com/OnsenUI/OnsenUI/issues/2471). Thx! – Ray Eldath Jul 12 '18 at 11:36
The reminder to ensure that root elements of the components are `v-on-page` solved my issue. – Josh Greifer Oct 31 '19 at 11:17

score 0 · Answer 2 · answered May 24 '18 at 06:28

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'

How to use Onsen UI tabbar with Vue single file components

2 Answers2

Resolution