Excluding Resuable global components from another component

Question

So I have many components which have a sidebar and navbar code written in all of them except one component. So I did the reasonable thing and made both of them(sidebar and navbar) separate components.

Now if I import them in App.vue, it shows in all the components including the one I don't need them in.

How do I go about it? Btw, the App.vue is my central point and where I'm loading router-view from

Make a Store State Value (boolean), then set in your App.vue <navbar v-if="yourstatevalue"></navbar>, then in the mounted of the pages you set the store value to true or false depending on if you wanna show the navbar or not — Badgy
Can you elaborate on this, kinda confusing. By store, do you mean Vuex, I'm not using Vuex (yet) — Peoray
Ok, if you dont wanna use vuex simply make a v-if="$route.path !== 'yourpathwhereyoudontwantthenavbar — Badgy
sidenote: If I'm using Vuex, is it the same method I'll follow but maybe this time, define the logic(v-if="$route.path !== 'path'") in my state? — Peoray

Peoray Peoray · Accepted Answer · 2019-01-30T13:25:52

As answered by @Badgy

Make a v-if="$route.path !== 'yourpathwhereyoudontwantthenavbar

Example:

// this will not display the sidebar on the register page
<Sidebar v-if="$route.path !== '/register'" />

Another Alternative by myself:

Define where you want these components to appear in the meta options of your route objects https://router.vuejs.org/guide/advanced/meta.html. It's more or less just a way to attach arbitrary information which you can fetch from the current route to determine e.g. your layouting

const router = new Router({
  routes: [
    {
      path: '/users',
      name: 'users',
      component: Users,
      meta: { sidebar: true, navbar: true },
    },
  },
})

// This will make the sidebar appear in the user page
<sidebar v-if="$route.meta.sidebar">

You can do <sidebar v-if="!$route.meta.sidebar"> if you don't want it just in 1 component

Excluding Resuable global components from another component

1 Answers