Pages
To add Title and Description meta tags to your page, please use definePageMeta script or the PageMeta component.
definePageMeta Script
To add Title and Description meta tags to your page, please use definePageMeta.
The configured information can be retrieved on the page using ViewState's 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
To add title and description meta tags to your page, please use definePageMeta.
It can be used without a script. It also supports dynamic route pages with data.
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
To support multiple languages, refer to Localization .
Site
URL
When you’ve determined the URL for publication, configure it in your nuxt.config.ts.
tsnuxt.config.ts
export default defineNuxtConfig({
site: {
url: 'https://usebootstrap.org',
},
});
Favicon
The favicon should be saved in the public folder and configured in your nuxt.config.ts.
tsnuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
],
},
},
});
Prerendering
The PageMeta information is also used in components such as Intro.
tsnuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/sitemap.xml': { prerender: true },
'/pages/**': { prerender: true },
'/dynamic/**': { prerender: false },
},
});