Content Modeling in Nuxt

Learn how to handle different nestable and content type blocks, render rich text, and use story references to manage content globally.

Setup

In the existing space, create the following blocks:

An article content type block with the following fields:
- title: Text
- content: Rich text
An article-overview content type block with the following field:
- title: Text
A featured-articles nestable block with the following field:
- articles: References

Next, create an Articles folder, open it, and create the following stories:

A few stories that use the article content type.
An article overview story with a article-overview content type. Select the option Define as root for the folder.

Finally, add the featured-articles block to the body field of the Home story, and select articles to feature.

Fetch and list all articles

Create a new ArticleOverview.vue file to get all stories from this new content type.

<script setup>
const articles = await storyblokApi.getAll('cdn/stories', {
  version: 'draft',
  starts_with: 'articles',
  content_type: 'article',
});
</script>

<template>
  <main>
    <h1>Article Overview</h1>
    <article v-for="article in articles" :key="article.uuid">
      <NuxtLink :href="article.full_slug">{{ article.content.title }}</NuxtLink>
    </article>
  </main>
</template>

Using the starts_with parameter, only stories from the “Articles” folder are fetched. Using the content_type parameter, the results are restricted to stories of the content type article. This prevents the article-overview from being included.

Now, the article overview page shows a list of links to all articles.

Create the article block

Add a new Article.vue component to render the new article content type.

<script setup>
defineProps({ blok: Object });
</script>

<template>
  <main v-editable="blok">
    <h1>{{ blok.title }}</h1>
    <StoryblokRichText :doc="blok.content" />
  </main>
</template>

To render rich text fields, the StoryblokRichText component provided by the @storyblok/nuxt module is used.

When clicking on links present in the article overview page, an article page renders correctly.

Handle referenced stories

In the app/pages/[...slug].vue data file, use the resolve_relations parameter to receive the complete story object for referenced stories.

<script setup>
const slug = useRoute().params.slug;

const { story } = await useAsyncStoryblok(
  slug && slug.length > 0 ? slug.join('/') : 'home',
  {
    api: {
      version: 'draft',
      resolve_relations: 'featured-articles.articles',
    },
  },
);
</script>

<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>

Next, create a new FeaturedArticles.vue component.

<script setup>
defineProps({ blok: Object });
</script>

<template>
  <section v-editable="blok">
    <h2>Featured Articles</h2>
    <article v-for="article in blok.articles" :key="article.uuid">
      <NuxtLink :href="article.full_slug">{{ article.content.title }}</NuxtLink>
    </article>
  </section>
</template>