結論
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で作るなら別途対処が必要なよう。
フロントエンドは素人なのでまた一つ勉強になりました。