Search⌘ K
Home
Courses
A Beginner’s Guide To Nuxt 3

Dynamic Title Templates and Additional Components

Explore how to set up dynamic title templates using useHead in Nuxt 3 for consistent page naming. Learn to apply additional Nuxt components like Title, Head, and Style to customize page metadata and styles. Gain practical skills to improve SEO and dynamic rendering in your Nuxt applications.

We'll cover the following...

Dynamic title template

When using the useHead composable, we can set the titleTemplate to be a string or a dynamic value:

Javascript (babel-node)
<!-- pages/single.vue -->
<script setup>
useHead({
	titleTemplate: "single image page",
	meta: [
		{
		name: 'description',
		content: 'page description',
		},
	]
	script: [{ src: "https://javascript-library.js" }],
	link: [{ rel: "stylesheet", href: "https://css-library.css" }],
	bodyAttrs: {
		class: "single",
	},
});
</script>

Line 4: Here, we set the titleTemplate to be a string, but we can also insert reactive values.

The value of titleTemplate is displayed in the browser’s tab:

Displaying titles in browser tabs
Displaying titles in browser tabs

Although we can set this on every page, we may also want to provide a template to keep the page names consistent. As in the above image, an example could be to add the page name followed by the website ...