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

The Single Page and Route Middleware

Discover how to effectively run middleware on selected routes, and learn about the role of the “/single” route.

We'll cover the following...

The modal has a NuxtLink component, which has two tasks. It redirects us to the “/single” URL and also sets the selected image to our state:

Javascript (babel-node)
<!-- components/Modal.vue -->
<NuxtLink to="/single" @click="selectedImage = modalImage"
	>More info</NuxtLink
>

Creating the single page

This new route now needs to be handled by adding a new page alongside the existing index.vue:

Pages directory structure
Pages directory structure

Let’s look at the following code:

Javascript (babel-node)
<!-- pages/single.vue -->
<script setup>
const selectedImage = useSelectedImage();
</script>
<template>
	<div>
		<img
			:src="selectedImage.largeImageURL"
			:alt="`image by ${selectedImage.user}`"
		/>
		<p>By: {{ selectedImage.user }}</p>
		<p>Tags: {{ selectedImage.tags }}</p>
	</div>
</template>

  • Line 4: We store the selected image information from the useState.js file.

  • Line 9–12: We display the large format image.

  • Lines 13–14: We display the image author and the image tags. ...