Запрос по клику в Nuxt

Функция useFetch рассчитана на запуск в setup, когда страница только создаётся. Если данные нужны только после клика, вызывать её в обработчике неудобно: запрос должен идти один раз по событию, а результат храниться в переменной, которую мы сами обновим.

Для таких случаев в Nuxt есть функция $fetch. Она возвращает обещание с JSON и подходит для кода внутри функций. Сохраним ответ в ref и выведем список после нажатия. До клика список не рисуется, запрос живёт только в браузере по инициативе пользователя:

<script setup>
	const products = ref(null);
	
	async function loadProducts() {
		products.value = await $fetch(
			'https://jsonplaceholder.typicode.com/posts',
		);
	}
</script>
<template>
	<button
		type="button"
		@click="loadProducts"
	>
		Load products
	</button>
	<ul v-if="products">
		<li
			v-for="item in products"
			:key="item.id"
		>
			{{ item.title }}
		</li>
	</ul>
</template>

Сделайте страницу с кнопкой, которая по нажатию загружает товары с тестового API и выводит их названия.

Добавьте вторую кнопку, которая очищает список и снова скрывает блок с товарами.