Vue-router master detail in desktop, but single page on mobile


vue-route is great!! I wondered if there a way to route a master-detail when running on great canvas (desktop), but like a single page for the master, and by clicking go to the detail page.

{ path: '/todos',
      name: 'todos',
      component: Todo,
      children: [
        { path: '', name: 'todo', component: TodoStart },
        { path: ':id', name: 'todoDetail', component: TodoDetail },
        { path: ':id/edit', name: 'todoEdit', component: TodoEdit }

in other words, In the example we load the components todo and todo detail at the same time when using desktop and when using mobile, loads only the Todo, and then on click, load the TodoDetail.

Hope there something like this!

thanks in advance.

There are 3 approaches to do it

  1. Same page handles both list and detail views on desktop and loads the list or detail depending on the name of the route on mobile
  2. Create the List view as the parent and the detail view as the child. Hide the detail view on mobile whereas list is shown everywhere. Now create a separate mobile detail page.
  3. Create an Index page as the parent, List and Detail pages as children. Also create List and Detail components which are shown inside the pages. When on desktop Show the list and detail COMPONENTs side by side. When on mobile show the List or Detail page using nuxt child
    My stackoverflow answer covers this in absolute detail with code