Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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