Nuxt3 URLをスラッシュ付きに統一する

Nuxt3のデフォルトURLは最後尾にスラッシュが付きませんが、設定を行うことでスラッシュ付きに統一することができます。

1. 最後尾にスラッシュを付与

nuxt.config.tsに下記コードを追加します。

project-folder/nuxt.config.ts

export default defineNuxtConfig({
  router: {
    options: {
      trailingSlash: true
    }
  }
});

2. スラッシュがないURLの場合スラッシュ付きにリダイレクトする

middlewareフォルダを作成し、trailingSlash.global.tsファイルを作成し、下記コード記載します。

project-folder/middleware/trailingSlash.global.ts

export default defineNuxtRouteMiddleware((to, from) => {
    if (!to.path.endsWith('/') && to.path !== '/') {
        return navigateTo(to.path + '/', { redirectCode: 301 });
    }
});

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選