Search⌘ K
Home
Courses
A Beginner’s Guide To Nuxt 3

Solution Review: Create a Dog Photo Catalogue

Explore how to build a dog photo catalogue by integrating data fetching from an API with user input handling and state management in Nuxt 3. Learn to capture user input, manage dynamic routes for fetching specific dog breeds, and display images efficiently. This lesson helps you understand event handling, dynamic API calls, and rendering data in a Nuxt 3 application.

We'll cover the following...

Solution

The solution to the “Fetch Data From an API” challenge is provided below:

<script setup>
const userInput = ref("");
const breed = ref("");

const { data: images } = await useFetch(
	() => `https://dog.ceo/api/breed/${breed.value}/images/random/3`
);

function handleSearch() {
	breed.value = userInput.value;
}
</script>
<template>
	<header class="search_header">
		<input
			type="text"
			v-model="userInput"
			@keyup.enter="handleSearch"
			placeholder="Search for an image"
		/>
	</header>
	<ul class="images">
		<li v-for="image in images?.message" :key="image">
			<img class="img_preview" :src="image" width="500" />
		</li>
	</ul>
</template>
Implementation of the solution

Explanation

Here is an explanation of the above code solution:

    ...