🗂

CompositionAPIにしてみた① layoutとNuxtBridgeは仲が悪いの巻

2022/08/11に公開

どうも、備忘録にzennを使うなんてなんてやつ。
今日もNuxt使いです。

今日は、昨日までで一旦NuxtBridgeの導入はできたということで、
CompositionAPIに書き換える作業をぬくぬく行っています。

基本的にはググれば普通に出てくるんで、まあ難なく…やっていたところ、
今日は壁に3回くらいぶち当たったので、3本書きます。(書きすぎ?)

今回の問題: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は使用できぬ」

https://github.com/nuxt/framework/issues/2920

どうやら、「definePageMeta」氏は、Nuxt3.2で出現した感じらしく、
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

ログインするとコメントできます