Universal Navigation Search Component for Vue Router

Question

Universal Navigation Search Component for Vue Router

Just starting out with Vue and frontend development.

I'm attempting to create a universal navigation bar in Vue Router using bootstrap vue, complete with a search bar feature.

However, because I have placed my navigation bar in App.vue, I am encountering difficulties passing the search function to specific routes.

Here is a snippet of what I currently have in my App.vue file:

<div id="app">
    <b-navbar toggleable="lg" variant="light" type="light" class="justify-content-between">
      <b-navbar-brand><router-link to="/">Brand</router-link></b-navbar-brand>
      <b-collapse class="nav-collapse" is-nav>
        <b-nav-item><router-link to="/about">Route 1</router-link></b-nav-item>
      </b-collapse>

      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input class="form-control mr-sm-2" v-model="search_term" placeholder="Search..."></b-form-input>
          <b-button variant="outline-success my-2 my-sm-2" type="submit" v-on:click="getSearch(search_term)">Search</b-button>
        </b-nav-form>
      </b-navbar-nav>
    </b-navbar>

    <router-view/>

  </div>

The router functions are within their own class.

The search functionality under b-nav-form was originally implemented on a specific page where the functions exist. Placing it within individual pages would require re-rendering each time the user navigates. Therefore, I opted to include it in the App.vue page for permanent rendering.

Is there a way to pass the search term to its respective function on its designated page while keeping the navbar universal? Is this feasible, or would it be simpler to keep the navbar on its own page?

javascript vue.js search router

Answer 1

Answer №1

If you're looking for the best way to share a navigation bar across your entire app and access its data from any route component, consider keeping it at the App.vue level just as you had initially thought. The key challenge then becomes accessing the search functionality in the route components, but this can be easily done using a Vuex store.

The Vuex store serves as a centralized source of truth for your application. Any component, no matter how deeply nested within your app's structure, can retrieve data from it using this.$store or other API methods (Check out the documentation)

All you need to do is store your search value in the Vuex store and have all your components access it when necessary.

See a minimal example below:

const mainComponent = Vue.component("mainComponent", {
  computed: {
    search() {
      return this.$store.state.search
    }
  },
  template: "<div><div>Main component</div><div>Search: {{ search }}</div><div><router-link to='/other'>Go to Other</router-link></div></div>"
});
const otherComponent = Vue.component("otherComponent", {
  computed: {
    search() {
      return this.$store.state.search
    }
  },
  template: "<div><div>Other component</div><div>Search: {{ search }}</div><div><router-link to='/'>Go to Main</router-link></div></div>"
});

const store = new Vuex.Store({
  state: {
    search: ''
  },
  mutations: {
    search(state, payload) {
      state.search = payload;
    }
  }
});

const router = new VueRouter({
  routes: [{
      path: "*",
      redirect: "/"
    },
    {
      path: "/",
      component: mainComponent
    },
    {
      path: "/other",
      component: otherComponent
    }
  ]
});

new Vue({
  el: "#app",
  store,
  router,
  data: {
    searchValue: ''
  },
  methods: {
    submitSearch() {
      this.$store.commit("search", this.searchValue);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.8/vue-router.min.js"></script>
<div id="app">
  <div class="search-bar">
    <form @submit.prevent="submitSearch">
      <input type="text" v-model="searchValue" placeholder="search" />
      <input type="submit" value="search" />
    </form>
  </div>
  <router-view />
</div>

Answer 2

If you're looking for the best way to share a navigation bar across your entire app and access its data from any route component, consider keeping it at the App.vue level just as you had initially thought. The key challenge then becomes accessing the search functionality in the route components, but this can be easily done using a Vuex store.

The Vuex store serves as a centralized source of truth for your application. Any component, no matter how deeply nested within your app's structure, can retrieve data from it using this.$store or other API methods (Check out the documentation)

All you need to do is store your search value in the Vuex store and have all your components access it when necessary.

See a minimal example below:

const mainComponent = Vue.component("mainComponent", {
  computed: {
    search() {
      return this.$store.state.search
    }
  },
  template: "<div><div>Main component</div><div>Search: {{ search }}</div><div><router-link to='/other'>Go to Other</router-link></div></div>"
});
const otherComponent = Vue.component("otherComponent", {
  computed: {
    search() {
      return this.$store.state.search
    }
  },
  template: "<div><div>Other component</div><div>Search: {{ search }}</div><div><router-link to='/'>Go to Main</router-link></div></div>"
});

const store = new Vuex.Store({
  state: {
    search: ''
  },
  mutations: {
    search(state, payload) {
      state.search = payload;
    }
  }
});

const router = new VueRouter({
  routes: [{
      path: "*",
      redirect: "/"
    },
    {
      path: "/",
      component: mainComponent
    },
    {
      path: "/other",
      component: otherComponent
    }
  ]
});

new Vue({
  el: "#app",
  store,
  router,
  data: {
    searchValue: ''
  },
  methods: {
    submitSearch() {
      this.$store.commit("search", this.searchValue);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.8/vue-router.min.js"></script>
<div id="app">
  <div class="search-bar">
    <form @submit.prevent="submitSearch">
      <input type="text" v-model="searchValue" placeholder="search" />
      <input type="submit" value="search" />
    </form>
  </div>
  <router-view />
</div>

Universal Navigation Search Component for Vue Router

Answer №1

Similar questions

Is there a way to enable drag and drop functionality on a dynamically created table using AJAX?

Troubleshooting: Issue with Nested jQuery UI Accordion Implementation

Personalizing the look of Stripe Payment Component in a React Application

Using $.get inside of a .click event handler

I need help accessing data from a REST API and displaying it in a table

Triggering unexpected syntax error upon clicking the dropdown menu in the navigation bar

Could there possibly exist a counterpart to .cloneNode?

How can I populate a dropdown list in JavaScript with JSON data from a file?

vue Error: Attempting to access properties of an undefined object (specifically, 'NormalModule')

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

Is there an issue with the proper execution of keypresses/updates in the code

Exploring the textures of an imported 3D model mesh with multiple materials in A-Frame and Three JS

The type does not have a property named 'defaultProps'

The unique capabilities of services and factories in Angular 1 - understanding their differences and what each excels at

Why does my node-js API's second endpoint not function properly?

The deletion function necessitates a switch from a server component to a client component

center text above images in flexbox when page is resized

display different vue component based on screen size

Ways to prompt for user input using JavaScript

Vue has detected an error during rendering: "TypeError: state.actionInfo.find is not a function"