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:
Press + to interact
Typical blog layout
When we click any blog post, it will use the Nuxt router to navigate to a route such as /blog/2.
Press + to interact
<!-- 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...