Custom querystring parser

[trikadin]

Please, add the opportunity to use custom qs lib instead of built-in.

[posva]

This was shipped in 2.4.0 https://router.vuejs.org/en/api/options.html#parsequery--stringifyquery

[ganigeorgiev]

It is not very clear from the documentation what the parameters and their types are. From the source, I suppose that parseQuery receives a String and stringifyQuery receives an Object.

// https://github.com/ljharb/qs
import qs from 'qs';

const router = new Router({
    routes: [
        // ...
    ],
    // set custom query resolver
    parseQuery(query) {
        return qs.parse(query);
    },
    stringifyQuery(query) {
        var result = qs.stringify(query);

        return result ? ('?' + result) : '';
    }
});

[rayrutjes]

I think we should allow to override the query parsing methods on a per route basis.
When you are trying to use a third party component that has special requirements regarding query parsing, you don't want to change the way existing URLs are parsed.
Does that make sense @posva , is it maybe already possible?

[posva]

@rayrutjes The url being global, I really think that's a bad idea to change it based on the current component. Appart from that I don't think it's even doable

[rayrutjes]

I think you are right @posva, per route doesn't make sense.
Then, I would militate to have a better url parsing by default that handles nested objects & co.
qs works perfectly ;) but we would like to not have existing users to have to change the way urls are parsed for our library.

For now, we are going to make sure that we are compatible with what is supported.

[posva]

I proposed that already some time ago but vue-router is 8.1kb gziped and qs is 2.6gziped.
Most people don't need nesting in queries, so being able to remove 20% of the size for most people is definitely a good thing

[rayrutjes]

Yes I agree, sadly.
We will work on a solution on our side ;)

[christhofer]

@posva can you add ganigeorgiev's comment above to the documentation?

Current documentation doesn't show how to use ths option.

[omerciftcibasi]

Addition to ganigeorgiev's comment, the query parameters inside routes will be automatically converted url string and parsed as an object when accessing $router.query

[tomisicm]

Does parseQuery / stringifyQuery work with the vue-router 4.0 and TS?
There are plenty of TS errors.

[avxkim]

If someone faced an issue overriding parseQuery or stringifyQuery in nuxt, here's solution:

//in nuxt.config.js
  router: {
    parseQuery(q) {
      return require('qs').parse(q)
    },
    stringifyQuery(q) {
      const r = require('qs').stringify(q)
      return r ? '?' + r : ''
    },
  },

There was an error about undefined qs variable, when i tried to import it at the top of the nuxt.config file.

[9mm]

Does anyone know why this is getting ignored? It's not even calling those functions

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  parseQuery(query) {
    console.log('y');
    return qs.parse(query);
  },
  stringifyQuery(query) {
    console.log('x');
    const result = qs.stringify(query, { encodeValuesOnly: true });
    return '?xxx';
  },
  routes: [
    {
      path: '/',
      name: 'root',
      component: () => import('../layouts/LayoutApp.vue'),
      children: [

[AlejandroAkbal]

In Nuxt 3 you can use this:

1. Create app/router.options.ts

2. Paste this:

import type { RouterConfig } from '@nuxt/schema'
import qs from 'qs'

// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterConfig>{
  // Fix router query parser - https://github.com/vuejs/vue-router/issues/1259#issuecomment-1571553624
  parseQuery: qs.parse,

  stringifyQuery: qs.stringify
}