Frequently Asked Questions

Rich Text & Vue Integration

How can I use Hygraph Rich Text with Vue?

To use Hygraph Rich Text with Vue, start by installing the @hygraph/rich-text-html-renderer package in your Vue project. Fetch the Rich Text field (AST and references) from your Hygraph model, then use the astToHtmlString method to convert the AST to HTML. You can pass custom renderers to override default HTML elements. Finally, use Vue's v-html directive to render the HTML in your component. For a step-by-step guide, see the original blog post and the sample data.

What is the purpose of the @hygraph/rich-text-html-renderer package?

The @hygraph/rich-text-html-renderer package allows you to convert Hygraph Rich Text AST (Abstract Syntax Tree) into HTML strings. This enables you to render rich text content in your Vue application, with support for custom renderers to override default HTML elements for specific content types.

Can I customize how Rich Text elements are rendered in Vue?

Yes, you can pass custom renderers to the astToHtmlString method from @hygraph/rich-text-html-renderer. This allows you to override default HTML elements for specific content types, such as rendering links with additional attributes or customizing how assets are displayed.

Is there a video tutorial for getting started with Hygraph and Vue?

Yes, if you're new to Vue and Hygraph, you can watch the "Using VueJS with GraphCMS" video tutorial for a beginner-friendly introduction.

Features & Capabilities

What is the Hygraph Rich Text field and how can it be used?

The Hygraph Rich Text field is a versatile field type used in content modeling that allows users to format paragraphs, headings, lists, and embed iframes, tables, and assets. Content saved in this field is stored as an abstract syntax tree (AST) based on Slate. This content can be queried in various formats, including HTML, Markdown, Text, and the raw AST (JSON). The Rich Text field provides flexibility for querying, displaying, and mutating content using the Content API. Learn more.

How does the Hygraph Rich Text Editor enhance content creation?

The Hygraph Rich Text Editor supports copy and paste from tools like Google Docs, Medium, and Confluence, maintaining formatting. It uses Slate and defines its own schema, making it easy to create and manage rich content. Read more.

Can Hygraph Rich Text be used with other frameworks besides Vue?

Yes, Hygraph Rich Text can also be integrated with frameworks like React and Svelte. There are video tutorials and guides available for both. Learn more.

How does Hygraph handle rich text content rendering in React?

Hygraph provides a React Rich Text Renderer that allows developers to easily render Hygraph documents in their React applications using Rich Text. The renderer converts rich text JSON objects into HTML. Learn more.

Technical Requirements & Documentation

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation for Hygraph, including guides on building and deploying projects, is available at the Hygraph Documentation page.

Does Hygraph provide an API for content management?

Yes, Hygraph provides a powerful GraphQL API that allows you to fetch and manage content efficiently. Learn more at the Hygraph API Reference.

Integrations

What integrations does Hygraph offer?

Hygraph offers a wide range of integrations, including Netlify and Vercel for hosting, BigCommerce, commercetools, and Shopify for eCommerce, Lokalise and Crowdin for localization, Aprimo, AWS S3, Bynder, Cloudinary, and Mux for digital asset management, Ninetailed for personalization, and more. For a full list, visit the Hygraph Integrations page.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 Compliant, ISO 27001 Certified, and GDPR compliant. These certifications ensure the highest levels of data protection and security for users. For more details, visit the Hygraph Security Features page.

Pricing & Plans

What is Hygraph's pricing model?

Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For more details, visit the Hygraph pricing page.

Use Cases & Customer Success

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises looking to modernize their technologies, and brands aiming to scale across geographies or re-platform from traditional solutions. See case studies.

What industries are represented in Hygraph's case studies?

Hygraph's case studies span industries such as food and beverage (Dr. Oetker), consumer electronics (Samsung), automotive (AutoWeb), healthcare (Vision Healthcare), travel and hospitality (HolidayCheck), media and publishing, eCommerce, SaaS (Bellhop), marketplace, education technology, and wellness and fitness. Explore more.

Can you share some customer success stories with Hygraph?

Yes. Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. Read more customer stories.

Who are some of Hygraph's customers?

Notable customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See all customers.

Support & Getting Started

How easy is it to get started with Hygraph?

Hygraph is designed for ease of use, even for non-technical users. You can sign up for a free-forever account and access resources like documentation, video tutorials, and onboarding guides. For example, Top Villas launched a new project in just 2 months. Get started here.

What support is available for Hygraph customers?

Hygraph offers 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to detailed documentation, video tutorials, and a community Slack channel. Contact support.

Performance & Business Impact

How does Hygraph optimize content delivery performance?

Hygraph emphasizes optimized content delivery performance, which directly impacts user experience, engagement, and search engine rankings. Rapid content distribution and responsiveness help reduce bounce rates and increase conversions. Learn more.

What business impact can customers expect from using Hygraph?

Customers can expect significant business impacts, including time-saving through streamlined workflows, ease of use with an intuitive interface, faster speed-to-market for digital products, and enhanced customer experience through consistent and scalable content delivery. See more.

Velocity at Scale: Join the Launch of Hygraph’s Latest AI Innovations

Working with Rich Text and Vue

In this post we’ll explore using Hygraph Rich Text with Vue.
Jamie Barton

Written by Jamie 

Jun 08, 2022
vue and rich text

To follow along with this post you'll need:

  • A Vue project already running, and connected to Hygraph,
  • A model with a Rich Text field, and some content published.

If you’re new to Vue and Hygraph, this video should show how to get started:

Start by installing the @hygraph/rich-text-html-renderer dependency within your project.

npm install –save-exact @hygraph/rich-text-html-renderer

Then inside of any Vue route where you're fetching the model data that has a Rich Text field you will want to get the AST, and any embedded references. Your query may look something like:

query GetPosts {
pages {
content {
json
references {
... on Post {
id
title
}
... on Asset {
url
width
height
}
}
}
}
}

If you'd prefer to follow along with some sample data, you can find that here.

The @hygraph/rich-text-html-renderer exports the method astToHtmlString that we’ll need to import. Don't forget to also import ref from vue as we'll need that too:

<script lang="ts" setup>
import { ref } from 'vue';
import { astToHtmlString } from '@hygraph/rich-text-html-renderer';
</script>

We'll now take the Rich Text AST (json + references) and convert it to HTML, providing the references, and custom renderers using astToHtmlString:

<script lang="ts" setup>
import { ref } from 'vue';
import { astToHtmlString } from '@hygraph/rich-text-html-renderer';
// const content = 'your query response for json/content'
// const references = 'your query response for references'
const html = astToHtmlString({
content,
references,
renderers: {
bold: props => `<strong>${props.children}</strong>`,
Asset: {
application: () => `<div><p>Asset</p></div>`,
text: () => `<div><p>text plain</p></div>`,
},
},
});
const richTextHtml = ref(html);
</script>

You'll see above we can pass custom renderers to astToHtmlString.

This means you can override the default HTML element for what's to be shown in the Rich Text. This is extremely useful for things like links in Nuxt that you might want to default to providing extra attributes to an href such as nuxt-link.

Now all that’s left to do is invoke the built-in directive v-html to render our html. If you’ve used libraries like React, you can think of this similar to dangerouslySetInnerHTML. Learn more about the v-html directive over on the Vue docs.

<div v-html="richTextHtml"></div>

That’s it! You will now see the Rich Text output with any custom renderers applied.

Blog Author

Jamie Barton

Jamie Barton

Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.