Live preview updates not working

[frans-vectra]

Hi, I'm struggling to get the realtime preview to work. It seems like components aren't rerendered when the input Storyblok event is fired.

I followed the Real-time Visual Editor documentation and this is what my root page component looks like:

<template>
  <render-content v-if="content" :content="content" />
</template>

<script>
import { useContent, storyblokBridge } from '@vue-storefront/storyblok'
import { onSSR } from '@vue-storefront/core'
import { computed, onMounted } from '@vue/composition-api'
import { useVueRouter } from '~/helpers/hooks/useVueRouter'

export default {
  name: 'Page',
  setup () {
    const { route } = useVueRouter()
    const slug = route.params.slug

    const { search, content } = useContent(slug)

    // wrap your content with reactive computed function
    const story = computed(() => content.value)

    // get data
    onSSR(async () => {
      await search({
        cache: false,
        version: 'draft',
        url: slug,
      })
    })

    // init the Storyblok Bridge
    onMounted(() => {
      storyblokBridge(story.value)
    })

    return {
      content: story,
    }
  },
}
</script>

One thing I see that doesn't make sense (looking at the storyblokBridge code) is that its expecting a content object with the following structure:

{
  content: {
    ...
  }
}

i.e. wrapped in a containing object, but the story object thats passed to isn't wrapped in this object container (going by the example in the documentation).

I've tried adding this missing wrapping object but it still doesn't seem to work. It also seems like the reactivity of the content object is lost when the new value is assigned to it.

Any guidance would be appreciated!

[lukasborawski]

@frans-vectra thanks for sharing. We haven't noticed that kind of behavior. We will check this one this or next week. Cheers.

[maciekkus]

Hi, I had similar issue like @frans-vectra. My fix for that is below. @lukasborawski Looking forward for your review of that part of storyblok bridge.

setup() {
    const { search: searchContent, content: dataFromStoryBlok } = useContent('homepage');

    const story = ref({});

    onSSR(async () => {
      await searchContent({ url: 'homepage', cache: false });
      story.value = dataFromStoryBlok.value;
    });

    onMounted(() => {
      story.value = dataFromStoryBlok.value;
       // here I tried to customize storyblokBridge code responsible for updating content
      if (window) {
        // eslint-disable-next-line
        const instance = new StoryblokBridge();
        instance.on(['input', 'change'], (payload) => {

          story.value = {
            ...payload.story.content,
            _meta: payload.story,
          };
        });
      }
    });

    return {
      content: story,
    };
  }