🐙

Nuxt3でQueryが勝手にデコードされる！stringifyQueryでハマった話

2022/08/30に公開

JavaScript

こんにちは。Nuxt2とNuxt3のstringifyQueryでハマったので、挙動の違いについて整理したいと思います。
情報は、執筆時点の話です。Nuxtのバージョンは3.0.0-rc.8です。

何にハマったか？

Nuxt2では、クエリに=がエンコードされた%3Dが入ってても、そのまま%3Dで表示されるのに、
Nuxt3では、=にデコードされてしまうことです。
下の2つの動画を見てください。上がNuxt2、下がNuxt3です。

原因

Vue RouterのプロパティstringifyQueryです。

Nuxt2

nuxt.config.jsで設定できます。デフォルトでは何も設定されていない模様？？
（なので、クエリが勝手にデコードされませんでした）

nuxt.config.js

  export default {
    ...
    router: {
      stringifyQuery: () => {
        ...
      }
    }
  }

Nuxt3

プロジェクトルートにappディレクトリを作成し、router.options.tsを作成し、その中で関数をカスタムします。
今回は以下のように対応しました。

app/router.options.ts

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

// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterConfig>{
  stringifyQuery: (query) => {
    const keys = Object.keys(query)
    return keys.map(key => `${key}=${encodeURIComponent(query[key] as string)}`).join('&')
  }
}

対応結果

Nuxt3でもクエリが勝手にデコードされなくなりました。

何にハマったか？

原因

Nuxt2

Nuxt3

対応結果

Discussion