vue-router: nested routes on mobile

I am quite new to Vue and am making a project that can be used on both Desktop and Mobile.

I am using vue-router to manage the routing in my project and I have nested views for some pages.

For example:

• I have a settings page

• This page has a navigation role and 2 sub-routes (like account or preferences)

• So I have 3 components, one Settings (do the nav and have a router-view). And one for each nested route.

Here in my router configuration

{
    path: '/settings',
    name: 'settings',
    component: Settings,
    children: [
        {
            path: 'account',
            name: 'settings-account',
            component: Account
        },
        {
            path: 'preferences',
            name: 'settings-preferences',
            component: Preferences
        }
    ]
}

Here in Settings.vue

<template>
    <nav>
        <!-- some router-link s -->
    </nav>
    <router-view></router-view>
</template>

My question is: When the user is on desktop, the router-view and the nav are on the same screen, which is fine.

But when the user is on a mobile, I would like to load another full page like /settings/account instead of having everything on the same.

Like a classic master-detail flow.

How can I implement this ? Should I declare another component and another route like

{
    path: '/settings/account',
    name: 'settings-account-mobile',
    component: SettingsAccount 
}

Or is there a better way to do that ?