Visual editor not updating on input change

[stijns96]

---

Expected Behavior

That the visual editor updates everything live

Current Behavior

In the visual editor, I can only live edit the first block. For the rest of the blocks I have to save my progress first and then reload the window

Steps to Reproduce

Simply Clone this repo and create a space for it.

What I find strange is that I have a space that I created when the V1 of story block was still the default. In the meantime, I also know that they have been busy with their products.

Could it have something to do with the subscription you have or something?

I have tried 3 different things, and I have the same problem with all of them.

1. Nuxt 3
2. Nuxt 2 (last versions of nuxt 2 and storyblock/nuxt-2)
3. Nuxt 2 (cloned repo of a website that does work)

Someone with a clear answer?

Thanks in advance!

[SebbeJohansson]

Hmm interesting. I could swear that this was working.

I tested it in two different applications (one using my own custom method for live editing with the bridge and one using just the built in composable) and neither of them are live editing properly.

https://github.com/SebbeJohansson/sebbejohansson-front/blob/main/pages/blog/%5Bslug%5D.vue#L30-L36
https://github.com/SebbeJohansson/vrtx.ContentSystem/blob/main/composables/useStoryblokFetch.ts#L34-L48

@Dawntraoz can you confirm if live-editing should be working on change or if we need to save for it to update?

[oldskool73]

@stijns96 - Your linked example project is Nuxt 2, so you should be using the Nuxt 2 version of this package https://github.com/storyblok/storyblok-nuxt-2 ... which also needs to be installed in buildModules (see install docs).

I can confirm that generally, when set up correctly, the visual editor is still working as normal/expected for us (ie interactively updating the page on changes, no save required), across different projects (Nuxt 2&3 / correct storyblok package / v1 & v2 editors).

[SebbeJohansson]

@oldskool73 from the two examples i sent (where I add the bridge in two different ways) can you tell if I am doing anything wrong?

Here is some nuxt2 code on how I do it in a nuxt2 project which is also not working anymore:

  mounted() {
    if (this.isPreview) {
      const { StoryblokBridge } = window;
      if (StoryblokBridge) {
        const storyblokInstance = new StoryblokBridge();
        storyblokInstance.on(['published', 'change', 'input'], (event) => {
          this.story = event.story;
        });
      }
    }
  },

[Dawntraoz]

@stijns96 after looking into the repo you shared, I'm wondering, are you using Nuxt 2 with our @storyblok/nuxt module for Nuxt 3?

[Dawntraoz]

@SebbeJohansson, as discussed here storyblok/storyblok-nuxt-2#62, this is more related to which Token is being used than an error. So I will close both issues since the Visual Editor is working as expected.

But before closing it (cc @stijns96 @oldskool73), do you think it will be worth it to explain in the Readme that the bridge only works on draft mode, and for that, we need to provide a conditional with the version reading if we are inside of Storyblok or not?

[stijns96]

Hi @Dawntraoz,

What I found out is that my data is probably not reactive. I'm testing it out now in nuxt 3 where I map my destructured props to a reactive(). The items const xxx = reactive({}) are therefore not reactive. By removing the destructure from the props and calling it just props, and making my const reactive a computed, it works.

In addition, it is certainly advisable to indicate in the readme that the bridge only works in 'draft'. A working example of how to properly switch that in dev and prod would be nice. In addition, I think that the config of your storyblok: {} could also be clearer. For example, it's not clear to me what bridge: Boolean does for example. Same goes for use: [apiPlugin] and useApiClient: Boolean. Examples of real cases would be nice.

Thanks in advance and for all the help!

[SebbeJohansson]

@stijns96 glad we could solve it partially yesterday by finding that destructuring the object broke it! 😄 Took some debugging and thinking 😅

[Dawntraoz]

Thanks for your comments. I'm adding a section on the Readme with the preview and prod environments, and I will try to check the best way of clarifying the apiOptions🎉