Nuxt3 + VuetifyのSSR表示崩れ解決方法｜AI実務ノート 編集部

1. 結論（この記事で得られること）

Nuxt3でVuetifyを使うと、初回ロード時だけレイアウトが一瞬崩れる問題に遭遇します。これ、私も最初のプロジェクトで丸一日潰しました。

この記事では以下が得られます：

• SSRハイドレーションミスマッチの原因と解決法（3パターン）
• Vuetify特有のCSSインライン化設定
• AI（Claude/GPT）を使った切り分け手順（10分→2分に短縮）
• 本番環境で安全に検証するテスト戦略
• 運用監視で見るべきメトリクス

結論から言うと、「vuetify-nuxt-module」の正しい設定と、SSRContextの適切な扱いで99%解決します。

2. 前提（環境・読者層）

想定環境

{
  "nuxt": "^3.10.0",
  "vuetify": "^3.5.0",
  "vuetify-nuxt-module": "^0.14.0",
  "node": ">=18.0.0"
}

想定読者

• Nuxt3 + Vuetifyで表示崩れに悩んでいる方
• SSRの仕組みは何となく分かるが実装で詰まっている方
• 本番リリース前に確実に潰しておきたいエンジニア

3. Before：よくあるつまずきポイント

症状A：初回ロード時だけボタンがズレる

<template>
  <v-btn color="primary">送信</v-btn>
</template>

現象：

• サーバー側HTML：スタイル未適用
• クライアント側JS読み込み後：正しく表示
• → 一瞬ガクッとレイアウトがズレる（FOUC: Flash of Unstyled Content）

症状B：グリッドが崩壊する

<v-container>
  <v-row>
    <v-col cols="12" md="6">左</v-col>
    <v-col cols="12" md="6">右</v-col>
  </v-row>
</v-container>

現象：

• 初回だけ縦並びになる
• ハイドレーション後に横並びに修正される

症状C：Dark mode がチラつく

// plugins/vuetify.ts
theme: {
  defaultTheme: 'dark'
}

現象：

• 一瞬ライトテーマで表示 → ダークに切り替わる
• ユーザー体験が最悪

私も最初、「Vuetifyのバグでは？」と疑いましたが、99%は設定不足です。

4. After：基本的な解決パターン

パターン①：vuetify-nuxt-module の正しいインストール

npm install vuetify-nuxt-module

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'vuetify-nuxt-module'
  ],
  vuetify: {
    moduleOptions: {
      /* module specific options */
    },
    vuetifyOptions: {
      ssr: true,  // ←これ重要
    }
  }
})

重要ポイント：

• 「ssr: true」 でサーバー側でもスタイル生成
• 「vuetify-nuxt-module」 が自動で最適化してくれる

パターン②：CSSインライン化の有効化

// nuxt.config.ts
export default defineNuxtConfig({
  vuetify: {
    vuetifyOptions: {
      ssr: {
        clientSideNav: true  // クライアント側ナビゲーション最適化
      }
    }
  },
  app: {
    head: {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://cdn.jsdelivr.net/npm/vuetify@3.5.0/dist/vuetify.min.css'
        }
      ]
    }
  }
})

注意：

• CDN使用は開発時のみ推奨
• 本番ではビルド時にバンドルすべき

パターン③：プラグイン側の設定

// plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
 
export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    ssr: true,
    components,
    directives,
  })
 
  nuxtApp.vueApp.use(vuetify)
})

この3つで基本的な表示崩れは解消します。でも、実務だとこれだけじゃ足りないんですよね。