Код ошибки страницы в Nuxt

Файл динамической страницы существует, но значение параметра в URL может быть неверным. Например, id товара, которого нет в нашем списке. Показать пустую страницу в такой ситуации неправильно: нужна настоящая ошибка с кодом 404.

В Nuxt для этого служит функция createError. Её вызывают на странице, когда данные не найдены. Nuxt прервёт обычный вывод и покажет error.vue с переданным кодом и сообщением.

Пусть есть массив постов и страница post/[id].vue:

<script setup>
	const posts = [
		{ id: 1, title: 'post1' },
		{ id: 2, title: 'post2' },
		{ id: 3, title: 'post3' },
	];
	
	const route = useRoute();
	const id = Number(route.params.id);
	const post = posts.find((item) => item.id === id);
	
	if (!post) {
		throw createError({
			statusCode: 404,
			statusMessage: 'Post not found',
		});
	}
</script>
<template>
	<p>
		{{ post.title }}
	</p>
</template>

Для существующего id страница работает как обычно. Для /post/99 сработает ошибка, и пользователь увидит страницу из error.vue с кодом 404.

Сделайте страницу продукта по адресу /product/:id с локальным массивом товаров в том же файле.

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