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

The Single Post Page

Learn how to request single posts from the server.

We'll cover the following...

With a typical blog page, such as our pages/blog/index.vue, we can usually click a post and be taken to the full-page version. This is what we will do with the pages/blog/[id].vue file:

Typical blog layout
Typical blog layout

When we click any blog post, it will use the Nuxt router to navigate to a route such as /blog/2.

Javascript (babel-node)
<!-- pages/blog/index.vue -->
<template>
  <div>
	<ul>
		<li v-for="post in allPosts?.posts" :key="post.id">
			<NuxtLink :to="`/blog/${post.id}`">{{ post.title }}</NuxtLink>
			<p>{{ post.body.slice(0, 200) }}</p>
		</li>
	</ul>
  </div>
</template>

  • Line 6: The NuxtLink component will navigate to a URL such as ...