What is the correct way to access a story content inside a Nuxt plugin?

[stefanobartoletti]

Description

I'm trying to find a way to retrieve the content of a single story inside a Nuxt plugin, because I need to set some data sourced from the CMS without it being related to a specific component.

To provide some extra context, I need to dynamically set the "Site Name" property, provided by the Nuxt SEO module, with something like that

// plugins/site-config.server.ts
import { defineNuxtPlugin, updateSiteConfig, useRequestURL } from '#imports'

export default defineNuxtPlugin({
  name: 'nuxt-site-config:overrides',
  enforce: 1,  // makes sure it's ran before nuxt-seo plugin
  setup() {
    const url = useRequestURL()
    if (url.origin.includes('subdomain.host.com')) {
      updateSiteConfig({
        url: url.origin,
        name: 'Subdomain',
        description: 'Subdomain description',
      })
    }
  },
})

Source: harlan-zw/nuxt-seo#121 (comment)

In the previous snippet, I need to set the name property with a string from Storyblok.

I tried something like this

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
    })
  },
})

and many variations, but no matter what I try, I always get a 500 error.

How can I access this data in a simple way?

Suggested solution or improvement

I wish I knew :)

Additional context

No response

Validations

• Follow our Code of Conduct

[Dawntraoz]

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.

[stefanobartoletti]

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

[stefanobartoletti]

@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

[stefanobartoletti]

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.

[stefanobartoletti]

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

I can provide more info and context if needed :)

[awacode21]

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

[stefanobartoletti]

@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)

[awacode21]

@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