Nuxt.js: Extending the VueRouter instance

[willishq]

I have an application I am currently converting to use nuxt.js and I have a slight issue with the methods for interacting with VueRouter. In my current application I am overriding the following methods in my router to parse the query string using qs

    parseQuery (query) {
        return Qs.parse(query)
    }
    stringifyQuery( query) {
        var result = Qs.stringify(query)
        return result ? ('?' + result) : ''
    },

There does not appear to be a way to achieve this in nuxt.js.

I understand keeping the API simple for interacting with the router, however, would it be so bad if everything passed to the router property was then passed on to the VueRouter instance?

If there is already a way to achieve this in nuxt, would anybody be able to point me in the right direction?

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

[clarkdo]

I have opened a pr https://github.com/nuxt/nuxt.js/pull/2100, if it can be merged, you can config parseQuery/stringifyQuery in nuxt.config.js

module.exports = {
  router: {
    parseQuery: function () {
      // ...
    }
  }
}

For temporarily fix, you can edit router.js inside node_modules/nuxt/lib/app/router.js, add parseQuery inside the router construct options.

[rwinders]

I want to overwrite parseQuery to use the qs module. I'm unsure the proper way to import qs in the nuxt config so parseQuery has access to it. If I require it in at the top of nuxt config I get [vue-router] qs is not defined. @willishq Based on your example, it seems like you had this working. Could you share what you did?

@clarkdo Do you know?

[calvinmuller]

+1

[GROwen]

Another 👍 for wanting to know how to achieve this.

I've created an issue here https://cmty.app/nuxt/nuxt.js/issues/c7485 because I'm experiencing the same qs is not defined error as @rwinders

@clarkdo Any pointers would be hugely appreciated.

[willishq]

Apologies for not coming back to this sooner, from what I remember, I ended up having to do something like

/**/
parseQuery: function (q) {
    return require('qs').parse(q);

},
stringifyQuery: function (q) {
  var r = require('qs').stringify(q);
  return r ? '?' + r : '';
}

because obviously the dependency being included at the top of the config file meant that it wasn't available in the created router file.

[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.