Can't get nuxt-link to work when trying to render _slug.vue page with Nuxt, Apollo and WPGraphQL

Question

I have a nuxt/vue app using apollo to query WPGraphQL on Wordpress. Im having hard time setting up my nuxt-link on my index page to route to my _slug.vue page. If I manually enter the url on the browser using the post's slug, I am able to render the data I want. In my index page, how do I use the post.slug with params to get my _slug.vue page to render?

This is my GraphQL Query:

  post(id: $slug, idType: SLUG) {
    title
    slug
    date
    id
    content(format: RENDERED)
    author {
      node {
        firstName
        lastName
      }
    }
  }
}

My /blog/index.vue page has the list of blog posts and I am trying to use nuxt-link to link each post to render _slug.vue:

<template>
  <div class="blog">
    <h1 class="blog__title">Blog</h1>
    <nuxt-link
      v-for="post in posts.nodes"
      :key="post.slug"
      :to="'blog/' + { params: { slug: post.slug } }"
      class="blog__post"
    >
      <h3 class="blog__post-title">
        {{ post.title }}
      </h3>
      <div class="blog__post-content" v-html="post.content" />
    </nuxt-link>
  </div>
</template>

<script>
import getPostByID from '~/apollo/queries/GetPostByID'

export default {
  data() {
    return {
      posts: [],
      query: ''
    }
  },
  apollo: {
    posts: {
      prefetch: true,
      query: getPostByID,
      update: (data) => data.post
    }
  }
</script>

With my _slug.vue file below, It uses the same query as my blog page and is able to render if I type the proper url with slug on the browser:

<template>
  <article class="post">
    <h1>{{ post.title }}</h1>
    <div class="blog__post-content" v-html="post.content" />
  </article>
</template>

<script>
import GetPostByID from '~/apollo/queries/GetPostById'

export default {
  data() {
    return {
      post: []
    }
  },
  apollo: {
    post: {
      prefetch: true,
      query: GetPostByID,
      variables() {
        return { slug: this.$route.params.slug }
      }
    }
  }
}
</script>

And what exactly does ".slug" refer to from "this.$route.params.slug"?

score 1 · Answer 1 · answered Nov 11 '20 at 10:55

If your index page is correctly displaying the list of posts, then you just need to adjust the url slightly.

<nuxt-link
  v-for="post in posts.nodes"
  :key="post.slug"
  :to="'blog/' + { params: { slug: post.slug } }"
  class="blog__post"
>

Should be:

<nuxt-link
  v-for="post in posts.nodes"
  :key="post.slug"
  :to="`blog/${post.slug}`"
  class="blog__post"
>

this.$route.params.slug refers to the url parameter you named by creating the dynamic file _slug.vue. So if you have pages/blog/_slug.vue and navigate to your-app.com/blog/my-first-post, my-first-post is the parameter string you get back when accessing this.$route.params.slug.

Slug isn’t a magical keyword, it could be anything instead and depends on the file name you create in your blog directory. Given the same url and pages/blog/_unicorn.vue, you would call this.$route.params.unicorn to return my-first-post.

Can't get nuxt-link to work when trying to render _slug.vue page with Nuxt, Apollo and WPGraphQL

1 Answers1