[Vuejs]-How to set has-navbar-fixed-top property only on some elements in Vue using Bulma?

by

3👍

✅

All you need to do is make an array full of your paths (pagesWithNavBar) and a computed method (shouldHaveNavBar) that returns true or false based on if the current path in url matches any item from our array (pagesWithNavBar) and finally add a check in the head method that checks if we currently are on the page with path included in our array!

.vue file – most likely your layout -> script tag

export default {
    data() {
      return {
        pagesWithNavBar: [
          "/login", "/signup" // add here all your paths where u wish to have your navbar
        ] 
      } 
    },
    computed: {
      shouldHaveNavBar() {
        return this.pagesWithNavBar.includes(this.$route.path)
      }
    },
    head() { // since nuxt.js uses vue-meta to update the document head and meta attributes 
             // you can also use it for your own good which means adding meta tags or editing
             // the attributes of a body tag! you can learn more here
             // https://nuxtjs.org/guide/views/#html-head
             // or here
             // https://github.com/declandewet/vue-meta#recognized-metainfo-properties
      return { 
        bodyAttrs: { 
          class: this.shouldHaveNavBar ? "has-navbar-fixed-top" : ""
        }
      }
    }
}
👤Ejdrien

Leave a comment