Nuxt.js×TypeScriptでURL末尾に"/"を追加する(Trailing Slash) #TypeScript

背景

本番環境の関係でURLの末尾に"/"を追加したかった。
そのため、vue-routerで遷移したpage全てを/付きでリダイレクトさせたい。

手順

middlewareにredirectをする処理を追加

middleware/redirect.ts

import { Middleware } from '@nuxt/types'

const routing: Middleware = ({ route, redirect }) => {
  if (route.path.slice(-1) !== "/") {
    redirect(301, route.path + "/");
  }
}

export default routing

nuxt.config.tsに上記ファイルをセットしてあげる
trailingSlashをtrueにする

nuxt.config.ts

...
router: {
  middleware: 'redirect',
  trailingSlash: true,
},
...

参考

https://knote.dev/post/2020-03-19/nuxt-trailing-slash/
https://designsupply-web.com/media/programming/6864/