Заголовок страницы в Nuxt

У каждой страницы есть текст во вкладке браузера. По нему пользователь отличает открытые адреса, когда переключается между вкладками. Этот текст не обязан совпадать с заголовком внутри страницы и задаётся отдельно от макета.

Давайте познакомимся с функцией useSeoMeta. Она описывает служебные данные документа, которые Nuxt подставит в разметку head. Для начала укажем только заголовок страницы со списком пользователей:

<script setup>
	useSeoMeta({
		title: 'Users',
	});
</script>
<template>
	<p>
		User list.
	</p>
</template>

После сохранения файла откроем /users в браузере и посмотрим на текст вкладки - там будет Users. Макет при этом не меняется: шапка и подвал те же, меняется только служебный заголовок документа.

У других страниц можно задать свои значения в их файлах. Так у каждого адреса будет понятная подпись во вкладке.

Задайте для страницы /contacts английский заголовок вкладки Contacts.

Сделайте страницу /products с заголовком вкладки Products.