Nuxt Starter Kit
Words are nice... but code speaks louder. Dive into a fully commented project template, showcasing these techniques (and more) in action.
Rich text in DatoCMS is stored in Structured Text 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
which will resemble this example:
To make it easy to convert this format in HTML inside your Nuxt projects, we provide a package called vue-datocms
that exposes a <StructuredText />
component that does all the tedious work for you.
To take advantage of it, install the vue-datocms
package if you haven't already:
yarn add vue-datocms
Then, inside your page, make a GraphQL query to fetch a Structured Text field, and feed the result to the data
prop of a <StructuredText />
component:
1<script setup>2import { StructuredText as DatocmsStructuredText } from "vue-datocms";3
4const QUERY = `query HomePage($limit: IntType) {5 allBlogPosts(first: $limit) {6 id7 title8 content {9 value10 }11 }12}`;13
14const { data } = await useQuery(QUERY);15</script>16
17<template>18 <div>19 <article v-for="blogPost in data.allBlogPosts" :key="blogPost.id">20 <h1>{{ blogPost.title }}</h1>21 <DatocmsStructuredText :data="blogPost.content" />22 </article>23 </div>24</template>
Other than "regular" formatting nodes (paragraphs, lists, etc.), Structured Text documents can contain three particular types of nodes:
itemLink
nodes are just like regular HTML hyperlinks, but point to other records instead of URLs;
inlineItem
nodes lets you directly embed a reference to a record in-between regular text;
block
nodes lets you embed a DatoCMS block record in-between regular paragraphs;
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", then the query should change like this:
1const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {2 allBlogPosts(first: $limit) {3 id4 title5 content {6 value7 blocks {8 __typename9 ... on ImageBlockRecord {10 id11 image { url alt }12 }13 }14 links {15 __typename16 ... on BlogPostRecord {17 id18 slug19 title20 }21 }22 }23 }24}`;
We also need to tell <StructuredText />
how you want such nodes to be rendered:
1<script setup>2import { h } from 'vue'3
4const renderInlineRecord = ({ record }) => {5 if (record.__typename === 'BlogPostRecord') {6 return h('a', { href: `/blog/${record.slug}` }, [record.title]);7 }8 return null;9};10
11const renderLinkToRecord = ({ record, children }) => {12 if (record.__typename === 'BlogPostRecord') {13 return h('a', { href: `/blog/${record.slug}` }, children);14 }15 return null;16};17
18const renderBlock = ({ record, key }) => {19 if (record.__typename === 'ImageBlockRecord') {20 return h(DatocmsImage, { key, props: { data: record.image.responsiveImage } });21 }22 return null;23};24
25// ...26</script>27
28<template>29 <div>30 <article v-for="blogPost of data.allBlogPosts" :key="blogPost.id">31 <h1>{{ blogPost.title }}</h1>32 <datocms-structured-text33 :data="blogPost.content"34 :render-inline-record="renderInlineRecord"35 :render-link-to-record="renderLinkToRecord"36 :render-block="renderBlock"37 />38 </article>39 </div>40</template>