Monaca Onsen UI Discord Chat Github Repo

Routed ons-page are always hidden when rendering with Nuxt.js



  • I manually config the vue-router of Nuxt and try to render pages using layout-pages way.
    Layouts are rendered but the index page is hidden because of lack of the shown attribute. The :index.sync prop seems to not change when debugging with devtools.
    Are there any way to fix it?

    Here is my default layout template: (This ons-page is OK)

    <template>
      <v-ons-page>
        <v-ons-tabbar swipeable>
          <nuxt slot="pages"/>
          <v-ons-tab v-for="(tab, idx) in tabs"
                     icon="app-menu"
                     :label="tab.label"
                     :key="idx"
                     :active="$route.name === tab.name"
                     @click.prevent="$router.push({name: tab.name})"/>
        </v-ons-tabbar>
      </v-ons-page>
    </template>
    

    Here is the index: (Lack the shown is always missing, regardless routing)

    <template>
      <v-ons-page shown>
        <v-ons-list modifier="dark">
          <component :is="floor.name" :floor="floor.data" v-for="floor in floors" :key="floor.id"/>
        </v-ons-list>
      </v-ons-page>
    </template>
    

    The routing:

    const index = () => import('~/pages/index.vue').then(m => m.default || m)
    const info = () => import('~/pages/info.vue').then(m => m.default || m)
    
    export function createRouter() {
      return new Router({
        mode: 'hash',
        routes: [
          {
            path: '/',
            redirect: '/index'
          },
          {
            path: '/index',
            name: 'index',
            component: index
          },
          {
            path: '/info',
            name: 'info',
            component: info
          }
        ]
      })
    }