get updated query in nuxt plugin after page load

Question

Well, I have a plugin with some functions in it, functions should update URL queries. The problem is, everytime I execute $global.changePage(2) or $global.changeLimit(2) the console.log(query) returns an empty object and didn't return updated queries in URL.

I know NuxtJS plugins execute once we load the page but is there any way to have updated query each time I use those functions?

export default (ctx: NuxtConfig, inject: Inject) => {
  const { app, query } = ctx;

  const global = {
    changePage (page: number) {
      console.log(query);
      
      app.router.push({
        query: { ...query, page }
      })
    },

    changeLimit(limit: number) {
      console.log(query);

      app.router.push({
        query: { ...query, limit }
      })
    },
  }

  inject('global', global)
  ctx.$global = global
}

Answer 1

Simply remove ctx.$global = global from the last line of your plugin.

The inject method provided by Nuxt takes care of making your global object available where it's needed, so there's really no need for you to overwrite the ctx.$global property.