I’ve got all my components setup and working, and I’m working on adding a component to manage highlighted
syntax. The blok renders content fine on pages, but when it’s used in the rich-text field the component is rendered but the content is missing. It seems like ‘blok’ is undefined when used in this way.
This is the component I’m trying to render:
squashfold21/HighlightedCode.vue at main · chprince/squashfold21 · GitHub
This is where the post rich-text is rendered:
I’ve also setup the richtextrenderer here:
This file has been truncated.
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import StoryblokVue from 'storyblok-vue';
import VueCompositionApi from '@vue/composition-api';
import VueRichTextRenderer from '@marvr/storyblok-rich-text-vue-renderer';
import Page from '@/components/Page';
import Hero from '@/components/Hero';
import About from '@/components/About';
import Teaser from '@/components/Teaser';
import Icon from '@/components/Icon';
import IconRow from '@/components/IconRow';
import LatestPosts from '@/components/LatestPosts';
import HighlightedCode from '@/components/HighlightedCode';
I’ve been scouring the docs and forums for ages and I can’t seem to find a solution.
Thanks in advance
As it turned out, in my component I was referencing “blok”, I needed to reference ‘document’ when the component is loaded through a rich-text field.