Help getting route resolver working with Nuxt 3

Developing with Prismic
1

Hello support,

we are having some trouble getting the route resolver working correctly with subfolders/categories.

These are our current settings in nuxt.config.ts:

  modules: [
    [
      '@nuxtjs/prismic',
      {
        endpoint: 'europeanairfiltergroup',
        toolbar: !DEV_MODE,
        clientConfig: {
          routes: [
            {
              type: 'hoofdcategorie',
              path: '/assortiment/:uid/'
            },
            {
              type: 'subcategorie',
              resolvers: {
                hoofdcategorie: 'hoofdcategorie'
              },
              path: '/assortiment/:hoofdcategorie/:uid/'
            }
          ]
        }
      }
    ],
  ],

As soon as we add the second route resolver, all the images fail to load. We are using "@nuxtjs/prismic": "^3.0.1" in our project in case it's relevant.

We suspect the names used in the resolver don't match, but like to confirm before investigating further.

Can anybody offer any advice?

Thanks in advance,
Loodzwaar

3

Hi @jeroen2 ,

Does your page folder structure match your routing?

4

Hi Phil,

our folder structure for categories looks like this:

- pages
-- assortiment
--- [categorie]
---- [subcategorie]
----- [id].vue
----- index.vue
--- index.vue
5

Hi Jeroen,

Looking at your nuxt.config.ts file, you've defined two routes, one for 'hoofdcategorie' and another for 'subcategorie'. The path for 'subcategorie' is dependent on 'hoofdcategorie', which seems to be correctly defined.

However, without more information about the structure of your Prismic documents and the exact error messages you're encountering, it's difficult to pinpoint the exact issue.

Here are a few things you could check:

  1. Your folder names must match the route resolver paths. For example your path is /assortiment/:hoofdcategorie/:uid/' but your file name is [id].vue it should be uid to populate this correctly.
  2. Ensure that the 'hoofdcategorie' field in your 'subcategorie' documents in Prismic matches the UID of the 'hoofdcategorie' documents. The route resolver uses this field to construct the URL.
  3. Check if the 'hoofdcategorie' field in your 'subcategorie' documents is a Content Relationship field. This is necessary for the route resolver to be able to link the two document types.
  4. Make sure that the names used in the resolver match the API ID of the content relationship field in the page type.
  5. Check the console for any error messages. These could provide more insight into what's causing the images to fail to load.
  6. Ensure that your folder structure in Nuxt matches the paths defined in your route resolver.

If you've checked all of these and are still encountering issues, it might be a more complex problem that needs further investigation.