Активный пункт меню в Nuxt

В общем меню пользователю важно видеть, где он сейчас находится. Компонент NuxtLink сравнивает свой проп to с активным маршрутом и при совпадении может добавить на корневой элемент ссылки дополнительный CSS-класс.

Имя класса задают пропом active-class. Пока открыта главная, класс active получит только ссылка с /; на странице каталога подсветится пункт Catalog. Стили для выделения можно описать в том же файле макета с scoped, без отдельных глобальных таблиц стилей.

Давайте отметим текущий пункт классом active и зададим для него жирное начертание:

<template>
	<div>
		<nav>
			<NuxtLink to="/" active-class="active">
				Home
			</NuxtLink>
			<NuxtLink to="/catalog" active-class="active">
				Catalog
			</NuxtLink>
			<NuxtLink to="/contacts" active-class="active">
				Contacts
			</NuxtLink>
		</nav>
		<slot />
	</div>
</template>
<style scoped>
	.active {
		font-weight: bold;
	}
</style>

Сделайте так, чтобы текущий пункт вашего меню получал класс, как в примере урока.