[URGENT HELP NEEDED] Master Detail View - Links in master not routing to detail view

I’ve been trying for many, many, many hours to get the master detail interaction to work, but my attempts have been futile. I keep getting the output on the master page (the same pane as where the list-item link is) rather than on the detail pane.

I’ve read the docs and I’ve seen the kitchen sink code and see no difference with mine, yet it isn’t working. I used the standard commands to start my project (npm i framework7-cli cordova -g; framework7 create --ui).

I’m using Vue and enabled PWA and simple web app support during installation. I tried to modify the code to use the master detail page, but with no success.

Here are snippets of my project’s code (which I hope proves useful). Let me know if you need any more details.


// Import Vue
import Vue from 'vue';

// Import Framework7
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import Framework7-Vue Plugin
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';

// Import Framework7 Styles
import 'framework7/css/framework7.bundle.css';
import 'framework7-icons/css/framework7-icons.css';

// Import Icons and App Custom Styles

import '../css/app.scss';

// Import App Component
import App from '../components/app.vue';

// Init Framework7-Vue Plugin

// Init App
new Vue({
  el: '#app',
  render: (h) => h(App),

  // Register App Component
  components: {
    app: App,


<f7-app :params="f7params" >
  <f7-view url="/" :main="true" :master-detail-breakpoint="800" class="safe-areas"/>
  import ListItem from '../components/list-item.vue';
  import NavList from '../pages/nav-list.vue';

  export default {
    components: {
    data() {
      return {
        // Framework7 Parameters
        f7params: {
          name: 'Test Project', // App name
          theme: 'auto', // Automatic theme detection
          view: {
            pushState: true,
            history: true,
    // App routes

    // Register service worker
       serviceWorker: {
        path: '/service-worker.js',


import ListItem from '../components/list-item.vue';
import NavList from '../pages/nav-list.vue';
import LoginPage from '../pages/login.vue';
import NotFoundPage from '../pages/404.vue';

export default [
    path: '/',
    component: NavList,
    master: true,
    detailRoutes: [
        path: '/detail/item/',
        component: ListItem
        path: '/detail/item/:id/',
        component: ListItem
        path: '/detail/login/:id/',
        component: LoginPage
        path: '(.*)',
        component: NotFoundPage,
            <f7-navbar back-link="Back" large>
                <div slot="title-large">Items <f7-badge v-if="newItems()">{{newItems().length}}</f7-badge></div>
            <f7-block-title v-if="lockedItems(false).length != 0">{{lockedItems(false).length}} Recent {{itemsFriendlyName(lockedItems(false))}}</f7-block-title>
                <list-item :selected-id="selectedItemId" :locked="item.locked" v-for="item in lockedItems(false)" @on-selected="updateSelectedItem" :key="item.id" :item="item"></item-list-item>
            <f7-block-title v-if="lockedItems(true).length != 0">{{lockedItems(true).length}} {{lockedItemsFriendlyLabel()}}</f7-block-title>
                <list-item :selected-id="selectedItemId" :locked="item.locked" v-for="item in lockedItems(true)" @on-selected="updateSelectedItem" :key="item.id" :item="item"></item-list-item>
<script>/* ... name, data, methods ... */</script>
    <f7-list-item :class="[selectedId === item.id ? 'sa-selected' : (item.isNew === true) ? 'sa-new' : '']" @click="markAsSelected" :reload-detail="true" :link="`/detail/${item.locked ? 'login' : 'item'}/${item.id}/`" :title="item.name" :footer="shortDescription(item)">
        <i v-if="locked" slot="media" class="fa far fa-lock" style="color: var(--f7-list-item-footer-text-color);"></i>
<script>/* ... name, props, methods ... */</script>

I managed to solve the problem. In the nav-list.vue file, removing the f7-view container and the name attribute in the exports resolved the issue.

This is probably a bug.