Dynamic nested routes

Developing with Prismic
1

I am trying to create a dynamic route, where a slug in a post decides what the parent-route should be.

This is inside my _post.vue file:

export default {
  nuxtI18n: {
    paths: {
      es: '/ayuda/:category/:uid',
      en: '/help/:category/:uid',
    },
  },
  async asyncData({ $prismic, params, error, app }) {
    const currentLocale = app.i18n.locales.filter(
      (lang) => lang.code === app.i18n.locale
    )[0];

    const result = await $prismic.api.getByUID(
      'help_category_post',
      params.uid,
      {
        lang: currentLocale.iso.toLowerCase(),
      }
    );

    if (result) {
      return {
        post: result.results || result,
        currentLocale,
      };
    } else {
      error({ statusCode: 404, message: 'Page not found' });
    }
  },
};

When you create this post in Prismic, there is a slug field (not the _uid, I'm using content relationship) where you can choose what the route-name should be. For example, if I choose test in the slug field the route should be /help/test/post-name.

The slug will then come from the post through post.data.link.slug.

My question is. How do I make the /:category/ match post.data.link.slug in this example?

Am I going about this wrong? Is there a better way to decide what parent-route a post should have?

8

Hello,

Thanks for reaching out us.

First, you don't need i18 for language implementation. you can add as many languages/locales as you need in Prismic and can query by language option. You can see our Multi-language example project.

Second, you should use the linkresolver. You will find complete detail here.

And we have discussed and fetchlinks here:

Here is the combination of lang and type to build links:

export default function (doc) {
  if (doc.isBroken) {
    return '/not-found';
  }

  if (doc.type === 'home') {
    return '/';
  }

  if (doc.type === 'page' && doc.lang ==== 'en-us') {
    return `/help/${doc.data.relationlink.data.name}/${doc.uid}`;
  }

  if (doc.type === 'page' && doc.lang ==== 'es-es') {
    return `/ayuda/${doc.data.relationlink.data.name}/${doc.uid}`;
  }

  return '/not-found';
};

And you can use route-resolver to build the complex paths:

I hope it answers your question. Let me know if you have other doubt.

Thanks,
Priyanka

1 Like
9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.