Pages
PageにTitleやDescriptionのMetaタグを追加するために、definePageMetaまたはPageMetaコンポーネントを利用してください。
definePageMeta Script
PageにTitleやDescriptionのMetaタグを追加するために、definePageMetaを利用してください。
設定した情報はViewStateのlocalizationで取得してページ内で再利用できます。
vue/pages/**/*.vue
<script setup lang="ts">
definePageMeta({
title: 'Intro',
description: `Displays the page title and summary in the current language`,
});
</script>
<template>
<ViewState
v-slot="title"
src="localization://title"
>
<h1>{{ title.data }}</h1>
</ViewState>
<ViewState
v-slot="description"
src="localization://description"
>
<p>{{ description.data }}</p>
</ViewState>
</template>
PageMeta Component
PageMetaコンポーネントを利用して、TitleやDescription等を設定することもできます。
Script無しで利用できます。データを利用したDynamicRouteページにも対応できます。
vue
<template>
<PageMeta
title="use-bootstrap"
description="use-bootstrap is the front-end framework based on Nuxt3 and Bootstrap5."
image="/img/logo/main1.svg"
/>
</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 },
},
});