Динамическая ссылка в Nuxt

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

Проп to может быть не только строковым литералом. Через привязку :to туда передают выражение, которое вычисляется для каждой строки списка. Для маршрута /users/1 и похожих адресов в app/pages нужен файл users/[id].vue; список только формирует правильные ссылки на эти адреса.

Пусть на странице списка пользователей данные лежат локально, без запроса к серверу:

<script setup>
	const users = [
		{ id: 1, name: 'Ann' },
		{ id: 2, name: 'Ben' },
		{ id: 3, name: 'Cara' },
	];
</script>
<template>
	<h1>
		Users
	</h1>
	<ul>
		<li v-for="user in users" :key="user.id">
			<NuxtLink :to="'/users/' + user.id">
				{{ user.name }}
			</NuxtLink>
		</li>
	</ul>
</template>

Сделайте список городов на английском; каждый пункт ведёт на /cities/ с именем города в последнем сегменте адреса.