A Beginner’s Guide To Nuxt 3/

...

/

Dynamic Title Templates and Additional Components

Dynamic Title Templates and Additional Components

Learn how to create dynamic title templates, and also discover some additional components provided by Nuxt.

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:

Press + to interact
<!-- 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:

Press + to interact
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 ...