Pages
PageにTitleやDescriptionのMetaタグを追加するために、PageMetaコンポーネントを利用してください。
Page Template
下記は use-bootstrap での最も単純なページの例です。
vue
<template>
<Head>
<PageMeta
title="use-bootstrap"
description="use-bootstrap is the front-end framework based on Nuxt3 and Bootstrap5."
image="/img/logo/main1.svg"
/>
</Head>
<NuxtLayout>
Page Contents
</NuxtLayout>
</template>
PageMeta Component
PageMetaコンポーネントを利用して、TitleやDescription等を設定することができます。
データを利用したDynamicRouteページにも対応できます。
vue
<template>
<Head>
<PageMeta
title="use-bootstrap"
description="use-bootstrap is the front-end framework based on Nuxt3 and Bootstrap5."
image="/img/logo/main1.svg"
/>
</Head>
<NuxtLayout>
Page Contents
</NuxtLayout>
</template>
Localization
多言語対応するには Localization を参照してください。
Site
URL
公開するURLが決定したら、nuxt.config.ts に設定します。
tsnuxt.config.ts
export default defineNuxtConfig({
site: {
url: 'https://usebootstrap.org',
},
});
Favicon
faviconはpublicフォルダに保存し、nuxt.config.ts に設定します。
tsnuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
],
},
},
});
Prerendering
PageMeta情報はIntroなどExtendコンポーネントでも利用されます。
tsnuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/sitemap.xml': { prerender: true },
'/pages/**': { prerender: true },
'/dynamic/**': { prerender: false },
},
});