0

Currently in my web app made in Vue3 I have the following app component:

<template>
  <CookieBanner/>
  <NavbarComponent/>
  <router-view />
  <FooterComponent/>
  <Toasts />
</template>

<script>
import NavbarComponent from '@/components/navbarComponent.vue'
import FooterComponent from '@/components/footerComponent.vue'
import CookieBanner from '@/components/cookieBanner.vue'
import Toasts from '@/components/toastsComponent.vue'

export default {
  name: 'App',
  components: {
    NavbarComponent,
    FooterComponent,
    CookieBanner,
    Toasts
  },
}
</script>

So as you can see, regardless of the active view, the components CookieBanner, Navbar, Footer and Toasts get rendered.

In some special cases, I would like to not render the Navbar and the Footer. What is the proper way of doing this?

All I can think of is adding a v-if in those components and calling a function displayNavbar() and displayFooter() that checks for the route and if it's one of the special ones that should not have it, returns false.

Is this the correct way or is there a cleaner way?

lpares12
  • 3,504
  • 4
  • 24
  • 45
  • 2
    I think you need something like this https://stackoverflow.com/q/64951947/8172857 – Boussadjra Brahim Aug 19 '22 at 08:05
  • Finally I went with this: https://stackoverflow.com/a/67352191/3770881 which is similar to what you said (using `meta` in the routes), but bit more clear for what I wanted to do – lpares12 Aug 19 '22 at 14:51

0 Answers0