CUSTOM(!) Contentful source for Gridsome.
This is an alteration of a PR on the @gridsome/contentful-source plugin with customizations for localization. In the current PR (which hasn't been accepted at this time) assets do not localize like entities do (or at all). This resolves that issue.
Refer to the original plugin for usage, as well as the PR, here. Confirm before using this that there are not significant updates to the OG. As of this writing, the @gridsome/contentful-source plugin is "under development".
npm install @gridsome/source-contentfulyarn add @gridsome/source-contentfulpnpm install @gridsome/source-contentful
module.exports = {
plugins: [
{
use: '@gridsome/source-contentful',
options: {
space: 'YOUR_SPACE', // required
accessToken: 'YOUR_ACCESS_TOKEN', // required
host: 'cdn.contentful.com',
environment: 'master',
typeName: 'Contentful'
}
}
]
}To add custom routes use the templates config with the collection type name as the key and the custom route as the value.
If you have Contentful ContentTypes named BlogPost and Article you can add new routes like this:
module.exports = {
templates: {
ContentfulBlogPost: '/blog/:slug',
ContentfulArticle: '/articles/:slug'
}
}@gridsome/souce-contentful currently works with all Contentful Content Types.
Contentful Rich text content types return a custom JSON response that can only be parsed to HTML with Contentful's package, https://www.npmjs.com/package/@contentful/rich-text-html-renderer.
A query that returns Contentful Rich Text, where richArticle is the Rich Text content type configured in the Contentful Content model:
query RichArticles {
allContentfulArticle {
edges {
node {
id
title
richArticle
}
}
}
}Rich Text fields returns a JSON document which can be used with @contentful/rich-text-html-renderer to generate HTML. The content from richArticle can then be passed to a Vue method from the page <template>. In this case, the method name is richtextToHTML:
<div v-for="edge in $page.articles.edges" :key="edge.node.id">
<p v-html="richtextToHTML(edge.node.richArticle)"></p>
</div>Finally, the method to convert the JSON document into HTML (in the most basic usage):
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
export default {
methods: {
richtextToHTML (content) {
return documentToHtmlString(content)
}
}
}The Contentful renderer is imported, then used to convert the JSON response from the page-query.
Custom parsing and more configuration details can be found on the Contentful Rich Text HTML Render package documentation
The Contentful HTML renderer doesn't automatically render embedded assets, instead, you can configure how you want to render them using BLOCK types and the configuration options.
To do so, import BLOCKS and setup a custom renderer before calling the documentToHtmlString method. Here, we're getting the image title and source url (contentful CDN src) and passing it to a string template.
import { BLOCKS } from '@contentful/rich-text-types'
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
export default {
methods: {
richTextToHTML (content) {
return documentToHtmlString(content, {
renderNode: {
[BLOCKS.EMBEDDED_ASSET]: (node) => {
return `<img src="${node.data.target.fields.file.url}" alt="${node.data.target.fields.title}" />`
}
}
})
}
}
}Rich Text fields can take an html argument to return generated HTML instead of a Rich Text document. The generated HTML can simply be passed in to an element with v-html.
query Article($id: String!) {
contentfulArticle(id: $id) {
id
title
richArticle(html: true)
}
}<div v-html="$page.contentfulArticle.richArticle" />Contentful Location data is returned as JSON with lat and lon. You will need to query the field name and each field in the GraphQL query.
query Location {
allContentfulTestType {
edges {
node {
geoLocation {
lat
lon
}
}
}
}
}In Contentful JSON ContentTypes, rather than receiving the entire object when querying for the field, GraphQL requires that you query for each field that you need.
query Json {
allContentfulTestType {
edges {
node {
jsonFieldName {
itemOne
itemTwo
}
}
}
}
}To enable multi-language support you have to define your locales in the plugin configuration. The locales have to be the same as they are set up in the Contentful dashboard.
module.exports = {
plugins: [
{
use: '@gridsome/source-contentful',
options: {
space: 'YOUR_SPACE', // required
accessToken: 'YOUR_ACCESS_TOKEN', // required
host: 'cdn.contentful.com',
environment: 'master',
typeName: 'Contentful',
locales: ['en', 'de']
}
}
]
}Make sure you also include the locale in the template path of the Gridsome configuration. For more information regarding the template configuration, please check the Gridsome documentation.
module.exports = {
templates: {
ContentfulNews: [
{
path: (node) => `/${node.locale}/${node.locale === 'de' ? 'nachrichten' : 'news'}/${node.slug}`
}
]
}
}You can access the node like you are used to. The current locale is available within GraphQL schema in the locale field.
<template>
<Layout>
<!-- locale: {{ locale }} -->
<h1>{{ $page.news.title }}</h1>
</Layout>
</template>
<page-query>
query News($path: String!) {
news: contentfulNews(path: $path) {
title,
locale
}
}
</page-query>When querying nodes within a page, you have to filter for the requested locale.
<template>
<Layout>
<div v-for="edge in $page.news.edges" :key="edge.node.id">
{{ edge.node.title }}
</div>
</Layout>
</template>
<page-query>
query News {
news: allContentfulNews(filter: { locale: { eq: "en" } }) {
edges {
node {
id
title
}
}
}
}
</page-query>It is recommended to use this in combination with gridsome-plugin-i18n. Please refer to their documentation for a complete setup guide.
After the successful installation you can access $locale from the page context and use it as a query variable. E.g.:
<template>
<Layout>
<div v-for="edge in $page.news.edges" :key="edge.node.id">
{{ edge.node.title }}
</div>
</Layout>
</template>
<page-query>
query News($locale: String! = "en") {
news: allContentfulNews(filter: { locale: { eq: $locale } }) {
edges {
node {
id
title
}
}
}
}
</page-query>