What is the correct way to access a story content inside a Nuxt plugin? about storyblok-nuxt HOT 8 OPEN

@awacode21 I don't know if this can be useful, but I kind of solved it in another way, using a plain fetch.

It does not really "feel" like the proper way (I would prefer to use the Storyblok API even here, but this is probably a little developer OCD coming in), but since I only need a single static value to be updated, it does the job.

(I'm using Nuxt in static site generator mode, so I used a server plugin as I don't need this value to change later)

// /plugins/seo-site-config.server.js
export default defineNuxtPlugin({
  name: 'nuxt-seo:dynamic-site-config',
  enforce: 'pre',
  async setup() {
    const response = await fetch(`https://api.storyblok.com/v2/cdn/stories/path/to/my/story?version=draft&token=${process.env.SB_API_TOKEN}`)
    const siteSettings = await response.json()
    updateSiteConfig({
      name: siteSettings.story.content.site_title,
    })
  },
})

Feel free to adapt it to your use case.

(I'm leaving this open as this is a workaround and not a solution to the original question)

from storyblok-nuxt.

Hi @stefanobartoletti, just wondering if the enforce option has something to do with it 🤔 because to load/initialize our SDK, we use this plugin: https://github.com/storyblok/storyblok-nuxt/blob/main/src/runtime/plugin.ts, so I guess your plugin doesn't have the context yet, so it wasn't initialized yet when you tried to call useStoryblokApi() composable.

Any chance you can set up a simple Stackblitz using that specific plugin so I can try to help you with the solution?

In the meantime, you can try enableSudoMode to true and define your plugin for initializing the SDK: Define your own plugin, and enforcing it before the one you are running there.

from storyblok-nuxt.

Thank you for your reply, I will check to see what happens when fiddling with enforce, and see to setup a stackblitz for you ASAP

from storyblok-nuxt.

@Dawntraoz this is a minimal stackblitz, I'm getting some different errors than my local config, but it is still not working, so maybe it can be useful too

https://stackblitz.com/edit/nuxt-starter-zmsdjr?file=plugins%2Fseo-site-config.server.js

Please let me know if you need something else

from storyblok-nuxt.

I'm trying to diagnose this further, I also tried to explicitly importing useStoryblokApi, like this

import { useStoryblokApi } from '#imports';

export default defineNuxtPlugin({
  name: 'nuxt-site-config:overrides',
  enforce: 'pre', // makes sure it's ran before nuxt-seo plugin
  setup() {
    let siteConfig = {};
    const storyblokApi = useStoryblokApi();

    const { data } = storyblokApi.get('cdn/stories/config/site-config', {
      version: 'draft',
    });
    siteConfig = data.story;

    updateSiteConfig({
      name: siteConfig.content.site_title,
    });
  },
});

But it is not working, I get this error, maybe it can help:

[nuxt] [request error] [unhandled] [500] storyblokApi is null

You can't use useStoryblokApi if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.

from storyblok-nuxt.

Sorry to bump this up, is there any news about this?

I can provide more info and context if needed :)

from storyblok-nuxt.

i am dealing with the same question. Any new insights?

from storyblok-nuxt.

@stefanobartoletti thanks for your answer. I did the same this morning.. going with a simple fetch. It solved my problem. But i agree i would prefer to use storyblok api

from storyblok-nuxt.