Pattern form VueJs Template WebPack

Yohann3396

Hello,

I need help for a specific pattern, i has download http://vuejs-templates.github.io/webpack/;

I need to keep the ons-splitter, add tabbar and navigator, all that in the homepage.

And the goal is to stack pages directly from the tabbar templates and from the ons- splitter.

So actually the code is like the example and i need something like that :

<v-ons-navigator>
  <v-ons-page id="app">
    <v-ons-splitter>
      <v-ons-splitter-side swipeable collapse width="250px"
        :animation="$ons.platform.isAndroid() ? 'overlay' : 'reveal'"
        :open.sync="menuIsOpen">
        <menu-page></menu-page>
      </v-ons-splitter-side>

      <v-ons-splitter-content>

 
    <v-ons-tabbar position="auto" :tabs="tabs" :index.sync="activeIndex">
      <template slot="pages">
        <component v-for="tab in tabs" :is="tab.page" :key="tab.page" :page-stack="pageStack"></component>
      </template>
    </v-ons-tabbar>


        
      </v-ons-splitter-content>
    </v-ons-splitter>
  </v-ons-page>
</v-ons-navigator>
</template>


<script>
import HomePage from './components/HomePage'
import MenuPage from './components/MenuPage'

export default {
  name: 'app',
  computed: {
    menuIsOpen: {
      get () {
        return this.$store.state.splitter.open
      },
      set (newValue) {
        this.$store.commit('splitter/toggle', newValue)
      }
    }
  },
  components: {
    HomePage,
    MenuPage
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ons-splitter-side[side=left][animation=overlay] {
  border-right: 1px solid #BBB;
}
</style>

I tried everything, search with the code on the playground etc but nothing works well,

Thank you for your help,