storyblok-nuxt
storyblok-nuxt copied to clipboard
storyblok
Is there a way to lazy load the storyblok client in nuxt?
We don't want to add 110kb to our client in production just to make a few api calls, but it would be acceptable to dynamically lazy load it when required for editing.
We know we can call the api urls directly, but also don't want to loose the great user experience for our editors.
Hello :). By lazy you mean async? Or to have the choice of adding the bridge or api? Or more?
I mean that only the minimal code is loaded for each user's usecase.
Let's say I build a JS bundle for my nuxt app for production. In that bundle there is ideally close to zero code from storyblok, I just want to call some APIs. Then an editor comes to the app, want's to edit a page. In that case I don't want to give him a separately built JS bundle because this requires extra maintenance. Instead, the app recognizes that the app now needs additional JS from storyblok to make editing possible. It "lazely" loads it at that moment and enables the cool live-editing UX we all love.
Has anyone figured this out or is there even an officially recommended way nowadays?
Hi, @hamsterbacke23 thanks a lot for this issue, I was investigating a little bit the Nuxt docs for modules https://nuxt.com/docs/guide/going-further/modules/#async-modules and I don't see any reference to the possibility of lazyloading modules
What I do see is useLazyFetch which would help you achieve it without the SDK tho.
Fetching is done at https://github.com/storyblok/storyblok-js level, not by the vue or nuxt SDKs so probably this is something that you could request as a feature there if you are still interested,
Since sadly is not something we can do at this level, I will close the ticket, feel free to open it again if you still have more questions
Hey thanks for the feedback. I think with the new Storyblok API it might be possible to lazyload editing js client-only, but need to look into it.