Nuxt Bridge/Vue2.7のscript setupでmiddlewareを使う

追記) v3.0.0-rc2以降

記事を書いたら、対応されていることを教えてもらえた(*´ω｀*)ｱﾘｶﾞﾀｲ

bridge でも一部definePageMeta 使えます！
(nuxt.config に設定が必要なんですがドキュメントに書かれてないのでPRを参考にしていただければと 🙏)https://t.co/0Y5NsSJQat

— wattanx (@pontaxx) November 7, 2023

• Release v3.0.0-rc.2 · nuxt/bridge

nuxt.config.tsにmacros.pageMetaを指定すると、
#importsにdefinePageMeta含まれるようになる。

import { defineNuxtConfig } from '@nuxt/bridge';
export default defineNuxtConfig({
  bridge: {
    vite: false,
    nitro: false,
    typescript: true,
    // これを指定
    macros: {
      pageMeta: true,
    }
  },
});

これでsetupだけでmiddlewareが使えるようになる。

<script lang="ts" setup>
import { definePageMeta } from "#imports";

definePageMeta({
  middleware: ["authed"]
});
</script>

rc-2での定義はこんな感じ。layoutも使える。

import type { DefineComponent } from 'vue';
export interface PageMeta {
    name?: string;
    middleware?: DefineComponent['middleware'];
    layout?: DefineComponent['layout'];
}
export declare const definePageMeta: (_: PageMeta) => void;

ほかにもGlobal Middlewareもサポートされたよう。ありがたい。。

• Release v3.0.0-rc.2 · nuxt/bridge

---

v3.0.0-rc1以前

Nuxt3/Vue3では、definePageMetaを使って個別にmiddlewareを指定できるが、
Nuxt Bridge/Vue2.7では存在しないよう。。

併用する形だと対応できるっぽい(*´ω｀*)
こちらの記事の引用

<script setup lang="ts">
// ...
</script>

<script lang="ts">
export default defineComponent({
 middleware: "authed",
})
</script>

なるほど、どちらも書けるのか(*´ω｀*)

参考にしたサイト様

• Vue2.7 + Nuxt2 で script setup と middleware を併用したい場合 - kidooom's Scrapbox