NuxtJS - this.$storybridge.proxy is null - no access to storyblok-js-client API

I can see in the source code for the nuxt plugin that $storybridge.proxy is supposed to be set to the value of window.storyblok https://github.com/storyblok/storyblok-nuxt/blob/master/lib/templates/plugin.js#L79

However the value is null when accessing it in my components. this.$storybridge is available indicating that the plugin installs successfully and I have used it elsewhere in my storyblok integration with success.

I need to access the isInEditor value the storyblok-js-client provides (https://github.com/storyblok/storyblok-js-client/blob/f6626766a3401f00b4bf4091609ac9b61051727e/dist/index.d.ts#L17) from within my nuxt/vue component but it’s not clear how that is done.

Is there another way in nuxt to determine whether the app is running in the editor?

Hello Tim,

have you checked if the necessary modules have been installed correctly?
Is the code which makes problems based on one of our boiler codes?

With best regards
Hannes

Hi Hannes

Yes, naturally I have already checked to see if things are installed correctly. Like I say everything else works, it’s just not making available the storyblok api object in $storybridge.proxy.

I based my project on the boilerplate, but manually implemented the nuxt configuration myself because your boilerplate code doesn’t work out of the box anymore.

Tim

Hello Tim,

I will forward your message to my colleagues but I will need to know which boilerplate code isn’t working out of the box. Is it this one https://github.com/storyblok/nuxtjs-multilanguage-website ?

With best regards
Hannes

Yep that’s the one :slight_smile:

It’s appreciated Hannes. What would be great also is if the documentation on the storyblok website could reflect the latest version of the code too. I had to combine the ideas of the documentation with the working parts of the example code to get something that actually works.

In the meantime if you could advise how I can access values like isInEditor from within Nuxt that would be most helpful!

Tim

Hey Tim,
yes there are multiple ways to determinate this.

I would point you to short discussion we had about this on discord - https://discordapp.com/channels/700316478792138842/700322738866356366/726819843583639553

But in short:

  • you can look for storyblok class in your code - in case you want to do something with css eg.
  • you can check for _storyblok query params (as bstrd wrote in discord)

if (route.query._storyblok) {
// whatever you want to do
}

Depending on where you want to check it the route is accessible either from the context or just directly from the global route

route.query
// or
this.$route.query

====

In the meantime if you could advise how I can access values like isInEditor from within Nuxt that would be most helpful!

You are totally right - update of the Nuxt.js sample and code is on our TODO list. Nuxt team is just faster then our update cycle. Sorry for the problems. I am also going to check out the isInEditor function.

and last - join us on our Discord Server where you can ask these question directly our community and discuss it with us. :wink: https://discord.gg/c69fReG

Thanks a lot Samuel!

I’ll try everything you suggested.

Thanks for the Discord invite!

Tim