---
title: Content Modeling in Nuxt
description: Learn how to handle custom blocks, render rich text, and use story references to manage content across your Nuxt project.
url: https://storyblok.com/docs/guides/nuxt/content-modeling
---

# 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

> [!NOTE]
> Learn more about fields in the [concept](/docs/concepts/fields).

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.

app/storyblok/ArticleOverview.vue

```html
<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.

> [!TIP]
> Learn more about parameters and filter queries in the [Content Delivery API documentation](https://www.storyblok.com/docs/api/content-delivery/v2).

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.

app/storyblok/Article.vue

```html
<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.

> [!NOTE]
> Learn more about handling rich text in Storyblok in the [fields concept](/docs/concepts/fields) and the [@storyblok/richtext reference](https://www.storyblok.com/docs/libraries/js/richtext).

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.

app/pages/\[...slug\].vue

```html
<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>
```

> [!NOTE]
> Learn more in the [references concept](/docs/concepts/references) documentation.

Next, create a new `FeaturedArticles.vue` component.

app/storyblok/FeaturedArticles.vue

```html
<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>
```

Now, this component will render links to the featured articles on the home page of the project.

## Related resources

[Concept: Fields](/docs/concepts/fields)

[Concept: References](/docs/concepts/references)

[@storyblok/richtext Package Reference](https://www.storyblok.com/docs/libraries/js/richtext)

  

## Pagination

-   [Previous: Dynamic Routing in Nuxt](/docs/guides/nuxt/dynamic-routing)
-   [Next: Internationalization in Nuxt](/docs/guides/nuxt/internationalization)