Portable text
Access text, images, and other media with Nuxt and the Sanity headless CMS.
Global helper
This module defines a global <SanityContent> component that can turn portable text into HTML. It is a lightweight functional component without an instance. It has been designed to be functionally equivalent to sanity-blocks-vue-component while addressing some of its shortfalls.
Example
<template>
<SanityContent :blocks="content" />
</template>
Local import
You may wish to import SanityContent only in the components that need it if you have disabled the global contentHelper option. Note that you will need to provide your projectId (and dataset if not production):
Example
<template>
<SanityContent :blocks="content" :serializers="serializers" />
</template>
<script>
import { SanityContent } from '@nuxtjs/sanity/dist/components/sanity-content'
import CustomBlockComponent from '~/components/CustomBlockComponent.vue'
export default {
components: { SanityContent },
data: () => ({
// This is optional
serializers: {
types: {
// This can be an imported vue component
customBlock: CustomBlockComponent,
// or a dynamic import
dynamicBlock: () => import('~/components/DynamicCustomBlockComponent.vue'),
},
marks: {
// You can also just pass a string for a custom serializer
// if it's a registered component or HTML element
internalLink: 'a'
}
}
})
}
</script>