Live preview doesn't work if using NuxtLayout within app.vue or pages.

[CodeThirtyTwo]

Having spent the best part of a couple of hours trying to work out why the live preview isn't updating content based on changes I'm making in the fields, I started working backwards to see what was causing the issue.

When I removed the < NuxtLayout > tags from my app.vue file and/or any of the files within the pages directory, it began to work correctly, suggesting there's a problem with using layouts.

Currently, I need to use a layout and it's preventing the bridge to work correctly. If anybody has any solutions for this, I'd appreciate any help.

---

Expected Behavior

Using useAsyncStoryblok, the live preview when editing a page should update changes as I make them.

Current Behavior

When a < NuxtLayout > is in use within my code, the preview doesn't update until I hit Save and refresh.

Steps to Reproduce

1. Create a basic Nuxt3 project.
2. Add @storyblok/nuxt and create a page in the pages directory
3. Using useAsyncStoryblok, display component content on the page
4. Add a < NuxtLayout > to the app.vue or any page inside the pages directory

[J-Sek]

I recently migrated a medium project to Nuxt 3 and got very.. unstable behavior of the bridge. Some pages load correctly but do not respond to changes. Some pages flash the content (SSR) and immediately transition to blank page (story becomes null right after hydration?). There is only one page that works fine.

Unfortunately I cannot use localhost because newer version refuses to accept postMessage (@storyblok/vue@6.2.1 did not have this problem).

• I tried removing <NuxtLayout>, but it did not help at all.
• useStoryblok has the same effect so far

Edit: After reading #251 I realized that useAsyncStoryblok lacks some kind of flag telling it to use bridge or not. I decided to re-write it (see gist)

[Dav3rs]

I'm trying to learn storyblok and all than I'm having is that: "very, very, very unstable behavior", even the tutorial is almost impossible to work through.

[alvarosabu]

Hi @CodeThirtyTwo Im using Layouts on my portfolio and the live preview works as expected, do you have a reproduction link I can take a look at so I can help you?

Thanks

[Dawntraoz]

@CodeThirtyTwo Hi Mike, were you using 2 composables inside the same Story? Let's say, where are you using useAsyncStoryblok or useStoryblok more than once, one in the Layout and one on the page, for example?

If that's the case the issue is resolved in the latest versions of the Storyblok JS SDK and integrated into the latest version of the Nuxt SDK.

Let us know and we can try to debug with you if that's not the case <3

[Dawntraoz]

As we didn't get any response, I will close the issue, feel free to create a new issue if this issue seems familiar to yours.