[和訳] Nuxt3 公式サイト~useHead
この記事について
この記事はNuxt3 公式サイト useHead を和訳したものになります（日本語が不自然になってしまっている箇所があるのはごめんなさい）。
useHead
Nuxt は Nuxt アプリの個々のページのヘッドプロパティを追加してカスタマイズするために useHead コンポーザブルを提供します。
useHead は @vueuse/head を利用しています。より詳細なドキュメントはこちらを参照してください。
詳細は下記ページを参照してください。
Type
useHead(meta: MaybeComputedRef<MetaObject>): void
以下は、useHead の非反応型である。より詳細な型は zhead を参照してください。
interface MetaObject {
title?: string
titleTemplate?: string | ((title?: string) => string)
base?: Base
link?: Link[]
meta?: Meta[]
style?: Style[]
script?: Script[]
noscript?: Noscript[]
htmlAttrs?: HtmlAttributes[]
bodyAttrs?: BodyAttributes[]
}
useHead のプロパティは動的で、ref、computed、reactive のプロパティを受け入れることができます。meta パラメータはオブジェクトを返す関数を受け取って、オブジェクト全体をリアクティブにすることもできます。
Parameters
meta
型：MetaObject
以下のヘッドメタデータを受け入れるオブジェクト
-
meta型：
Array<Record<string, any>>配列の各要素は新しく作成された
<meta>タグに対応づけられ、オブジェクトプロパティは対応する属性に対応づけられます。 -
link型：
Array<Record<string, any>>配列の各要素は新しく作成された
<link>タグに対応づけられ、オブジェクトプロパティは対応する属性に対応づけられます。 -
style型：
Array<Record<string, any>>配列の各要素は新しく作成された
<style>タグに対応づけられ、オブジェクトプロパティは対応する属性に対応づけられます。 -
script型：
Array<Record<string, any>>配列の各要素は新しく作成された
<script>タグに対応づけられ、オブジェクトプロパティは対応する属性に対応づけられます。 -
noscript型：
Array<Record<string, any>>配列の各要素は新しく作成された
<noscript>タグに対応づけられ、オブジェクトプロパティは対応する属性に対応づけられます。 -
titleTemplate型：
string|((title: string) => string)個々のページでページタイトルをカスタマイズするための動的テンプレートを設定します。
-
title型：
string個々のページで静的ページのタイトルを設定します。
-
bodyAttrs型：
Record<string, any><body>タグの属性を設定します。各オブジェクトプロパティは対応する属性に対応づけられます。 -
htmlAttrs型：
Record<string, any><body>タグの属性を設定します。各オブジェクトプロパティは対応する属性に対応づけられます。
Discussion