[Vuejs]-Dynamically set Vuetify component props based on condition

by

-1👍

I will assume you are using the v-app-bar in your layout and therefore as you say, accessing the route with this.$route would entail a lot of ifs or a large switch statement and is not so performant.

As each route in nuxt is defined by the page file it is written in you can use that to pass details to the layout which can then use those as props in the v-app-bar. To do that you can use the event bus. I have a previous answer detailing it’s use here but i can outline how to apply it here.

It would appear you want to pass such props as color, src, scroll-target etc to tailor the nav bar. From your page you can pass these props like so:

//index.vue -- or any route 

export default {
  mounted() {
      let props = {
        color: '#43a047',
        src: 'https://picsum.photos/1920/1080?random',
        scroll-target: '#scrolling-techniques-5',
        scroll-threshold: 500
      }
      this.$nuxt.$emit('appBarProps', props);
  }
}

Then in your layout listen for the event bus like this:

//default.vue

created() {
    this.$nuxt.$on('appBarProps', p => {
      this.appBarProps = p;
      })
    },

data() {
    return {
      appBarProps: {}
    } 
}

beforeDestroy() {
    this.$nuxt.$off('appBarProps');
},

and use the appBarProps object in your v-app-bar

Leave a comment