Nuxt3 タイトルやmeta情報の追加方法

Nuxtを使うとhtmlファイルが存在しないため、ページのhead内に挿入するtitleやメタ情報、ファビコンの設定やスタイルシートの読み込みなど（BootstrapなどのCDN含む）どこに入れるのだろうと思ったのですが、実装は簡単でした

Nuxtのプロジェクトを作成した際に自動的につくられるnuxt.config.tsファイルに追記をするだけでした

以下がサンプルのファイル内容です

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    ssr:true,
    app:{
        head: {
          title: "My Blog",
          meta: [
            { charset: "utf-8" },
            { name: "viewport", content: "width=device-width, initial-scale=1" },
          ],
          link: [
            { rel: "icon",type: "image/x-icon", href: "/favicon.ico" }, 
            {rel: "stylesheet",href: 　　　　　　　　　　　　　　　　　　　　　　　　"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"}
          ],
        },
      }

})

モード選択はここで

前回の内容でお伝えした

SSRモードとCSR（クライアントオンリー）モードの設定はここで選択します

ssr:trueを追加するとSSRモードです

デフォルトでtrueのようなのでSSRで作成する際は明記する必要はなさそうです

falseにするとCSRモードとなります

簡単にモードが切り替えられます

↓のスクリーンショットは同じホーム画面のソースを表示したものです

上がSSRで下がCSRです

これだけ見ても違いがよくわかります

＜head＞内の情報はapp内に書き込む

app:{
 head:{ここにhead内の情報をオブジェクト形式で入力}
    }

appというのがNuxt appの設定となります

この中にhead情報を追記することができます

その他にも設定できることがありますので、それは

こちらのNuxt3の公式ドキュメントでご確認ください

Bootstrap5のCDNもここでlinkを挿入して実装しています

オブジェクト形式でかくため、そのままURLを張らないように気を付けましょう

link:[ {rel: "stylesheet",href: 　　　　　　　　　　　　　　　　　　　　　　　　"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"}]

このように「キー：”内容”」というオブジェクト型で書きます

これでCDNでライブラリを導入することもできますね

コードはこちらのリンクのGithubを参考にしてください