Mapping additional content types to use the root url

Developing with Prismic
1

Within my 'pages' folder I have _uid.vue which does a great job of helping me create new Documents in the Prismic Documents Writers Room and have them appear on the root url.

Eg. New document of content type page called 'about' appears on /about.

However I have a different Content Type with its own unique styling and template for Official Documents like Terms, Privacy etc that is currently here.

/official/_uid.vue

However I want these to also be available on the root url.

So Im currently getting this:

/about (Content Type: Page)
/contact (Content Type: Page)
/careers (Content Type: Page)
/official/terms (Content Type: Official)
/official/privacy (Content Type: Official)
/official/security (Content Type: Official)

And what I want is this..

/about (Content Type: Page)
/contact (Content Type: Page)
/careers (Content Type: Page)
/terms (Content Type: Official)
/privacy (Content Type: Official)
/security (Content Type: Official)

What exactly do I need to do to get the above custom routing approach working, so that more than one content type can share the root url?

3

Hello,

Thanks for posting us.

It can be possible with triggering API query with each possible content type.
For example: for getting /terms under official content type:- trigger API query with "page", and then with "official", and see if you get results from one of the content type and the same cases will be applied in case of each UID.

Warning: It may be possible to retrieve document in multiple cases because same UID can be associated with multiple content types, so it is always recommend to fire a query with content type only.
For example: "terms" UID can be with "official" and "page" content types and have different document with each content type.

I hope it gives your answer, let me know if you have doubts.

Thanks,
Priyanka

4

Hello,

I send you the solution in one of my projects in the pages/_uid.vue file.
I hope that that will be able to help you

<template>
  <component :is="customTypeComponent" v-if="data" :data="data" />
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';
import BlogHomeCustomType from '@/custom-types/BlogHomeCustomType.vue';
import BlogPostCustomType from '@/custom-types/BlogPostCustomType.vue';
import { Context } from '@nuxt/types';
import { NuxtOptionsHead } from '@nuxt/types/config/head';
import PageCustomType from '@/custom-types/PageCustomType.vue';

@Component({
  components: {
    BlogHomeCustomType,
    BlogPostCustomType,
    PageCustomType,
  },
})
export default class PrismicPage extends Vue {
  public data: any = null;
  public customType: string | null = null;

  get customTypeComponent(): any {
    switch (this.customType) {
      case 'blog_home':
        return BlogHomeCustomType;
      case 'blog_post':
        return BlogPostCustomType;
      case 'page':
        return PageCustomType;
    }
  }

  async asyncData({ $prismic, params, error }: Context): Promise<any> {
    let data: any = null;
    const customTypes = ['page', 'blog_home', 'blog_post'];

    for (const customType of customTypes) {
      try {
        data = (await $prismic.api.getByUID(customType, params.uid)).data;
        return { data, customType };
      } catch (e) {}
    }

    error({ statusCode: 404, message: 'Page not found' });
  }

  head(): NuxtOptionsHead {
    return {
      title: this.data.meta_title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.data.meta_description,
        },
      ],
    };
  }
}
</script>

Thanks.

Jérémy