Pages
To add Title and Description meta tags to your page, please use PageMeta component.
Page Template
Here is the simple example of a page using 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
To add title and description meta tags to your page, please use PageMeta Component.
It also supports dynamic route pages with data.
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
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 },
},
});