Nuxt.js: conditional logic or props to layouts?

[voidale]

First I really have to say I love what you do with the framework amazing just started yesterday and creating my first project with nuxt.js already!

I was wondering what will be the best approach on the following? this is my default layout:

<template>
  <div>
    <nav-bar />
    <nuxt/>
    <my-footer/>
  </div>
</template>

I want to reuse the layout but to add additional logic or props based on routes so it works really well for / but when ever I go to /search I want an extra prop for <nav-bar /> something like that:

<template> <div> <nav-bar :logo="true" /> <nuxt/> <my-footer/> </div> </template>

Because the routes are hidden/generated I'm not really sure what the best way to approach this without duplicating the layout?

Thanks a lot

_{This question is available on Nuxt.js community (#c152)}

[Atinux]

Hi @voidale

You can do it pretty easily by checking this.$route.path:

<template>
  <div>
    <nav-bar :logo="hasLogo" />
    <nuxt/>
    <my-footer/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      hasLogo: false
    }
  },
  created () {
    this.routeChanged()
  },
  watch: {
    '$route': 'routeChanged'
  },
  methods: {
    routeChanged () {
      this.hasLogo = (this.$route.path === '/search')
    }
  }
}
</script>

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.