# Structured Text fields

Rich text in DatoCMS is stored in [Structured Text](https://www.datocms.com/docs/content-modelling/structured-text.md) fields, which lets us use it in many different contexts, from HTML in the browser to speech fulfillments in voice interfaces, if that's what you want.

There's a lot to be said about Structured Text and the extensibility of it, but for now let's just say that it returns content in a particular [JSON format called `dast`](https://www.datocms.com/docs/structured-text/dast.md) which will resemble this example:

```json
{
  "schema": "dast",
  "document": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "level": 1,
        "children": [
          {
            "type": "span",
            "marks": [],
            "value": "Hello world!"
          }
        ]
      }
    ]
  }
}
```

To make it easy to convert this format in HTML inside your Nuxt projects, we provide a package called [`vue-datocms`](https://github.com/datocms/vue-datocms) that exposes a `<StructuredText />` component that does all the tedious work for you.

To take advantage of it, install the [`vue-datocms`](https://github.com/datocms/vue-datocms) package if you haven't already:

Terminal window

```bash
yarn add vue-datocms
```

Then, inside your page, make a [GraphQL query to fetch a Structured Text field](https://www.datocms.com/docs/content-delivery-api/structured-text-fields.md), and feed the result to the `data` prop of a `<StructuredText />` component:

```html
<script setup>
import { StructuredText as DatocmsStructuredText } from "vue-datocms";

const QUERY = `query HomePage($limit: IntType) {
  allBlogPosts(first: $limit) {
    id
    title
    content {
      value
    }
  }
}`;

const { data } = await useQuery(QUERY);
</script>

<template>
  <div>
    <article v-for="blogPost in data.allBlogPosts" :key="blogPost.id">
      <h1>{{ blogPost.title }}</h1>
      <DatocmsStructuredText :data="blogPost.content" />
    </article>
  </div>
</template>
```

## Rendering special nodes

Other than "regular" formatting nodes (paragraphs, lists, etc.), Structured Text documents can contain four particular types of nodes:

-   [`itemLink` nodes](https://www.datocms.com/docs/structured-text/dast.md#itemLink) are just like regular HTML hyperlinks, but point to other records instead of URLs;
    
-   [`inlineItem` nodes](https://www.datocms.com/docs/structured-text/dast.md#inlineItem) lets you directly embed a reference to a record in-between regular text;
    
-   [`block` nodes](https://www.datocms.com/docs/structured-text/dast.md#block) lets you embed a DatoCMS block record in-between regular paragraphs;
    
-   [`inlineBlock` nodes](https://www.datocms.com/docs/structured-text/dast.md#block) lets you embed a DatoCMS block record in-between regular text;
    

If a Structured Text document contains one of these nodes, then we need to change the GraphQL query, so that we also fetch all the records and blocks it references. As an example, if the field can link to other Blog posts, and can embed blocks of type "Image block" and "Mention block", then the query should change like this:

```jsx
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
  allBlogPosts(first: $limit) {
    id
    title
    content {
      value
      blocks {
        __typename
        ... on ImageBlockRecord {
          id
          image { url alt }
        }
      }
      inlineBlocks {
        ... on RecordInterface {
          id
          __typename
        }
        ... on MentionBlockRecord {
          username
        }
      }
      links {
        __typename
        ... on BlogPostRecord {
          id
          slug
          title
        }
      }
    }
  }
}`;
```

We also need to tell `<StructuredText />` how you want such nodes to be rendered:

```html
<script setup>
import { h } from 'vue'

const renderInlineRecord = ({ record }) => {
  if (record.__typename === 'BlogPostRecord') {
    return h('a', { href: `/blog/${record.slug}` }, [record.title]);
  }
  return null;
};

const renderLinkToRecord = ({ record, children }) => {
  if (record.__typename === 'BlogPostRecord') {
    return h('a', { href: `/blog/${record.slug}` }, children);
  }
  return null;
};

const renderBlock = ({ record, key }) => {
  if (record.__typename === 'ImageBlockRecord') {
    return h(DatocmsImage, { key, props: { data: record.image.responsiveImage } });
  }
  return null;
};

const renderInlineBlock = ({ record, key }) => {
  if (record.__typename === 'MentionBlockRecord') {
    return h('code', { key }, `@${record.username}`);
  }
  return null;
};

// ...
</script>

<template>
  <div>
    <article v-for="blogPost of data.allBlogPosts" :key="blogPost.id">
      <h1>{{ blogPost.title }}</h1>
      <datocms-structured-text
        :data="blogPost.content"
        :render-inline-record="renderInlineRecord"
        :render-link-to-record="renderLinkToRecord"
        :render-block="renderBlock"
        :render-inline-block="renderInlineBlock"
      />
    </article>
  </div>
</template>
```

## Related content in "Nuxt"

- [Nuxt + DatoCMS Overview](https://www.datocms.com/docs/nuxt.md)

- [Include draft contents](https://www.datocms.com/docs/nuxt/include-draft-contents-during-development.md)
- [Responsive images](https://www.datocms.com/docs/nuxt/managing-images.md)

- [Displaying videos](https://www.datocms.com/docs/nuxt/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/nuxt/rendering-structured-text-fields.md)

- [Adding SEO to Nuxt pages](https://www.datocms.com/docs/nuxt/seo-management.md)
- [Real-time updates](https://www.datocms.com/docs/nuxt/real-time-updates.md)

- [Visual Editing](https://www.datocms.com/docs/nuxt/visual-editing.md)
- [Nuxt Starter Kit    
Words are nice... but code speaks louder. Dive into a fully commented project template,
            showcasing these techniques (and more) in action.
       ✅ Official   Nuxt 4](https://www.datocms.com/marketplace/starters/nuxt-starter-kit.md)