Toggling components depending of the current path in Nuxt

Question

My layouts/default.vue looks like this:

<template>
  <v-app style="background-color: transparent; color: unset">
    <v-main>
      <ActHeader></ActHeader>
      <Nuxt
        v-if="
          !$nuxt.isOffline ||
          $route.name == 'profile-downloads' ||
          $route.name == 'profile-downloads-id'
        "
        style="min-height: 300px"
      />
      <Footer />
    </v-main>
  </v-app>
</template>

<script>
import Footer from '@/components/Footer.vue'

export default {
  components: {
    Footer,
  },
  async fetch() {
    await this.$store.dispatch('store/retrieveSettings')
    await this.$store.dispatch('store/retrieveMenus')
  },
}
</script>

I don't want to show actHeader and Footer components into the first page(/) but in other pages(/about) I want to show these components.

---

I'm already aware of finding out URL and using watch like this:

watch: {
  $route (to, from) {
    //false actHeader and Footer Components!
  }
} 

and it's actually working but I'm looking for a better answer, maybe something more logical.

Answer 1

There is no special magic, use a conditional on each component, no cleaner way of doing otherwise (no need to over-engineer here).

<template>
  <div>
    <act-header v-if="$route.name !== 'index'"></act-header>
    <nuxt />
    <footer-comp v-if="$route.name !== 'index'"></footer-comp>
  </div>
</template>