Display a specific route in a different router-view

Question

I've got a Vue 3 app with Vue Router 4 and I want to achieve this:

<template>
  <v-app>
    <router-view></router-view> //This is where login would be
    <app-layout>
      <router-view /> //Everything else 
    </app-layout>
  </v-app>
</template>

<script lang="ts" setup>
import AppLayout from "./components/AppLayout.vue";
</script>

I've got an <app-layout> component which includes navbar and a sidebar, but I don't want to display those when the user is not logged in. I also don't want to wrap each component in <app-layout> individually.

Is there a way I can achieve this?

Answer 1

You can use the Vue-router's v-slot API like this :

<template>
    <v-app>
        <router-view v-slot="{ Component, route }">
            <component v-if="route.name === 'Login'" :is="Component" />
            <app-layout v-else>
                <component :is="Component" />
            </app-layout>
        </router-view>
        <!-- Or -->
        <router-view v-slot="{ Component, route }">
            <component :is="route.name === 'Login' ? 'template' : 'app-layout'">
                <component :is="Component" />
            </component>
        </router-view>
    </v-app>
</template>

<script lang="ts" setup>
import AppLayout from "./components/AppLayout.vue";
</script>

And in your router, for the login route, don't forget to add the route name :

{
    name: 'Login', // important
    // ...
}