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)

        <v-ons-tabbar swipeable>
          <nuxt slot="pages"/>
          <v-ons-tab v-for="(tab, idx) in tabs"
                     :active="$ ==="

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

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

    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

Log in to reply