【Nuxt3】middlewareでリダイレクトする

ログインしていないユーザーが、URLで直接アカウントページを開いたときにログインページにリダイレクトする、もともと存在していたURLにアクセスしたときにトップページにリダイレクトする、などページのアクセスがあったときにリダイレクトしたいときは多々あるので、そういったときにmiddlewareでリダイレクトする方法を紹介します。

ミドルウェアを作成

// /middleware/redirect.ts

export default defineNuxtRouteMiddleware(async (to, from) => {
    return navigateTo('/')
})

vueファイルで適用

<script setup lang="ts">
definePageMeta({
  middleware: ['redirect']
})
</script>

3日でできるNuxt.js WEBアプリ開発入門