Resolve_relations in NuxtJS

Hi, these questions may be more specific to using NuxtJS with Storyblok, but the use case I’m struggling with seems like it would be common.

I have a folder with content objects (bios) and separately, a ContactUs component that uses a multi select list to reference Bios.

When the Bios are rendered as full pages, the render correctly using a Bio.vue template. In the ContactUs Component template, I have access to the Multi Select list, but it only stores the UIDs.

In NuxtJS, using the boilerplate project, I’m not sure how to specify resolve_relations for the content request.

<li v-for="bio in blok.contact_list">
  <p class="debug>{{ bio }}</p>
</li>

Renders what appears to be the correct list of UID strings.

<component v-for="blok in blok.contact_list"
  :key="blok._uid"
  :blok="blok"
  :is="blok.component | dashify"></component>

Renders <undefined …

I can’t seem to figure out where I should be specifying resolve_relations or if there is another solution.

Thanks.

Hello Brian,

resolving the relation(s) is done while fetching the data using the nuxt.js client. You can add the resolve_relations parameter like in this example to the request:

.get('cdn/stories/your_story', {
version: 'draft',
resolve_relations: 'component_name.field,another_component_name.field'
})
.then((response) => {
console.log(response.data.story.content.modules);
})
.catch((error) => {
console.log(error);
}

Hello Hannes,

do you have a complete example of this? because I can’t see where I can do this in Nuxt, is it in the page with asyncData (I couldn’t manage to make it work…)? or is it at a component level with fetch? this last solution is not ideal because it induces a second request and a delay in the display of the result.

Thanks for your help,

David