How to open route as modal on Desktop but page on mobile in Nuxt

Question

I am using the @nuxtjs/router module for defining custom routes. Here is my router.js file

import Vue from 'vue'
import Router from 'vue-router'

import News from '~/pages/News'
import Login from '~/pages/auth/Login'
import Signup from '~/pages/auth/Signup'
import Account from '~/pages/Account'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'Index',
        component: News,
      },
      {
        path: '/news',
        name: 'News',
        component: News,
      },
      {
        path: '/news/:tag',
        name: 'TaggedNews',
        component: News,
      },
      {
        path: '/news/:id([a-f0-9]{32})/:title',
        name: 'NewsItem',
        component: News,
      },
      {
        path: '/news/:tag/:id([a-f0-9]{32})/:title',
        name: 'TaggedNewsItem',
        component: News,
      },
      {
        path: '/login',
        component: Login,
      },
      {
        path: '/signup',
        component: Signup,
      },
      {
        path: '/account',
        component: Account,
      },
    ],
  })
}

I want to open the /login route as a modal on Desktop but page on mobile. How do I go about it?

Answer 1

Short answer would be you can't, as for using a modal you need to tell the app what "actual route" you are on - imagine navigating directly to /login on desktop and the issue becomes clear.

My suggestion would be to not add a route for login, but to use a query Param for whether or not the Login modal should be displayed:

• query Param would be handled by a LoginModal component on the app root
• closing/opening would both trigger and be managed by changes to the query parameter

On mobile, the modal can be styled as a full screen block.