🗂
CompositionAPIにしてみた① layoutとNuxtBridgeは仲が悪いの巻
どうも、備忘録にzennを使うなんてなんてやつ。
今日もNuxt使いです。
今日は、昨日までで一旦NuxtBridgeの導入はできたということで、
CompositionAPIに書き換える作業をぬくぬく行っています。
基本的にはググれば普通に出てくるんで、まあ難なく…やっていたところ、
今日は壁に３回くらいぶち当たったので、３本書きます。（書きすぎ？）
今回の問題：layout反映してくれない。
とりあえず公式通りに書く
optionsAPIのときは、
〇〇.vue
<script>
export default {
layout: "demo-layout",
…
って書いとけば読み込んでくれたけれど、
CompositionAPI（しかもsetup構文）では読み込んでくれませんでした。
で、また記事を検索する…
そして、公式とかにも、書いてあるとおりに一度書きました。
〇〇.vue
<script setup lang="ts">
import plainHeader from '~/layouts/demoHeader.vue';
definePageMeta({
layout : "demoHeader",
});
</script>
で、
layouts/demoHeader.vue
<template>
<div>
- <Nuxt />
+ <slot />
</div>
</template>
みたいにして、
pages/○○.vue
<template>
<NuxtLayout>
コンテンツ
</NuxtLayout>
</template>
的なふうに書き換えた。
レイアウトでない（エラー残しとくの忘れた）
…けど、「そのdefinePageMetaつかえないよ！」って言ってたと思う。
とにかく途方に暮れて、調べた結果衝撃の事実
NuxtBridgeでは、「definePageMetaは使用できぬ」
どうやら、「definePageMeta」氏は、Nuxt３．２で出現した感じらしく、
Bridgeにはない模様なんです。
みんな！layoutは、NuxtBridgeでは使えないのよ！覚えておくといいよ！
結論
〇〇.vue
<script setup lang="ts">
// import demoHeader from '~/layouts/demoHeader.vue';
// definePageMeta({
// layout : "demoHeader",
// });
//↑NuxtBridgeでは機能しない
</script>
<script lang="ts">
//NuxtBridgeからNuxt3に更新したとき、消して良い
import { defineComponent } from "vue";
export default defineComponent({
layout: "plainHeader"
});
</script>
と書いておきました。これで読み込みます。
（別々にscript書くのかなしい）
Discussion