Link of Blog article

Hi everybody!

Little question, simple it seems... but i'm new :smiley:
For a blog, on my sliceMachine, i created a Custom Type:

With theses fields:

On Prismic.io, i created 2 articles (with slug article-test-1 and article-test-2).

I'm trying to get theses paths:

/blog/:category/:uid

On my /blog/index.vue, i have:

<template>
  <div class="section container-fluid blog">
    <ul>
    <ArticleListItem
      v-for="article in articles"
      :key="article.slug"
      :article="article" />
  </ul>
  </div>
</template>
<script>

export default {
  async asyncData({ $prismic, params, error }) {
    const { results: articles } = await $prismic.api.query(
      $prismic.predicate.at('document.type', 'article')
    )
    return {
      articles
    }
  }
}
</script>

And the ArticleListItem component:

<template>
  <div>
    <PrismicLink :field="article" tab-index="-1">
     {{ article.data.title }}
    </PrismicLink>
  </div>
</template>

<script>

export default {
  props:[
    'article'
  ]
}
</script>

Articles are displayed, but the link is wrong (no link in fact...).
I tried to write:

<PrismicLink :field="article.data.uid" tab-index="-1">

But articles aren't displayed anymore.

I looked at the nuxt-config, i tried to add a route:

prismic: {
    endpoint: apiEndpoint,
    modern: true,
    apiOptions: {
      routes: [
        {
          type: 'homepage',
          path: '/',
        },
        {
           type: 'page',
           path: '/:category/:uid',
           resolvers: {
             category: 'category'
           }
         }
      ],
    },
  },

But it doesn't work either...
What i'm doing wrong?

Thanks a lot!
Vincent

Hey Vincent,

Try changing your type: 'page' to type: 'article' in your route resolver.

You will also need to create a category repeatable custom type. You then create a content relationship in your article custom type to link the article to the category.

Let me know how you get on :slight_smile:

1 Like

Hi Jake! Thanks a lot! :heart:

It's better! Link are working perfectly!

1 Like