Monaca Onsen UI Discord Chat Github Repo

Pattern form VueJs Template WebPack

  • Hello,

    I need help for a specific pattern, i has download;

    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-page id="app">
          <v-ons-splitter-side swipeable collapse width="250px"
            :animation="$ons.platform.isAndroid() ? 'overlay' : 'reveal'"
        <v-ons-tabbar position="auto" :tabs="tabs" :index.sync="activeIndex">
          <template slot="pages">
            <component v-for="tab in tabs" :is="" :key="" :page-stack="pageStack"></component>
    import HomePage from './components/HomePage'
    import MenuPage from './components/MenuPage'
    export default {
      name: 'app',
      computed: {
        menuIsOpen: {
          get () {
            return this.$
          set (newValue) {
            this.$store.commit('splitter/toggle', newValue)
      components: {
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    ons-splitter-side[side=left][animation=overlay] {
      border-right: 1px solid #BBB;

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

    Thank you for your help,