結論

SSRで作るのか否かちゃんと確認してnuxt.configを書こうという話。
私はSPAで作ろうとしていました。

何が起きたか

Nuxt3で試しにアプリケーション作ろうと思って簡単なページを作りました。

主に使ったもの

node 18.17
nuxt 3.6.5
vuetify 3.3.11

こんな感じのめちゃくちゃシンプルなコード。

app.vue

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

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

layout/default.vue

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

<template>
  <v-layout>
    <Header />
    <v-main>
      <NuxtPage />
    </v-main>
  </v-layout>
</template>

<style scoped>
</style>

components/header.vue

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

<template>
  <v-app-bar>
    <v-app-bar-title>example</v-app-bar-title>
  </v-app-bar>
</template>

<style scoped>
</style>

pages/index.vue

<template>
  example
</template>

いざ動作確認！したらなぜか初期表示がおかしい。

何だこれ

なんかコンテンツ部分がヘッダーに隠れて描写された後然るべき場所に移動しているように見える。

原因

色々調べてみたところ、どうやらnuxt.config.tsの設定が足りなかったよう。

nuxt.config.ts

export default defineNuxtConfig({
+ ssr: false,

ssr: falseを追加したらnuxtのローディング画面を挟んだ後にちゃんとしたレイアウトで表示された。

SPAで作っているつもりだったがSSRで設定されていたための様子。詳しくは調べていないがSSRで作るなら別途対処が必要なよう。

フロントエンドは素人なのでまた一つ勉強になりました。