Nuxt3の基本
kurumin
プログラミングのーと
Nuxt.jsのheadタグ内どうする？
kurumin
Contents
nuxt.config.tsでのデフォルト<head>設定
全体のデフォルトの<head>設定を行う場合、nuxt.config.tsにappConfigのheadプロパティを使用します。
export default defineNuxtConfig({
app: {
head: {
title: 'デフォルトのタイトル - Nuxt 3',
meta: [
{ name: 'description', content: 'デフォルトの説明文' }
],
link: [
{ rel: 'stylesheet', href: '/global.css' }
]
}
}
});nuxt.config.tsでアプリ全体の<head>設定を行える。- ページごとに
useHeadで上書きすることも可能。
app.vueでグローバルな<head>を設定する
すべてのページに共通する<head>の内容を設定する場合は、app.vueが適切。
<template>
<NuxtPage />
</template>
<script setup>
useHead({
titleTemplate: '%s - My Nuxt 3 App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
});
</script>- Nuxt 3では
app.vueが全体のエントリーポイントとして利用される。 titleTemplateを使ってページごとにタイトルを動的に変えられる。
動的データを使った<head>設定
APIから動的にデータを取得し、それを<head>に反映する例。
<template>
<div>
<h1>{{ article?.title }}</h1>
</div>
</template>
<script setup>
const { data: article } = await useAsyncData('article', () =>
$fetch('https://api.example.com/article/1')
);
useHead({
title: article.value?.title || 'デフォルトのタイトル',
meta: [
{ name: 'description', content: article.value?.description || 'デフォルトの説明文' }
]
});
</script>
- Nuxt 3では
$fetchが推奨され、ブラウザ・サーバー両方で利用可能。 useAsyncDataで非同期データを取得し、サーバーサイドレンダリングに対応。
useHeadを使ったページごとの設定（Nuxt 3版）
<template>
<div>
<h1>ホームページ</h1>
</div>
</template>
<script setup>
useHead({
title: 'ホームページ - Nuxt 3サイト',
meta: [
{ name: 'description', content: 'これはNuxt 3のホームページの説明です。' }
],
link: [
{ rel: 'icon', href: '/favicon.ico' }
]
});
</script>
- Nuxt 3では
@unhead/vueを使わずに直接useHeadをインポート不要で使用可能。- 可能ではあるが、将来の互換性を確保するために明示的なインポートが推奨されている。import { useHead } from ‘@unhead/vue’;でインポートした方がよい（インストールも忘れずに）
setup関数内での使用が推奨されている。
ABOUT ME
