How to set dynamic site name with Nuxt Seo version 2.x?

[stefanobartoletti]

Details

This is probably related to #34 but specific to version 2.x of the module.

I currently have this configuration in my layouts/default.vue to dynamically set the site name, fetched from a CMS

<template>
  <div class="flex min-h-screen flex-col">
    <SeoKit :site-name="siteConfig.content.site_title" />
    <SiteHeader />
    <slot></slot>
    <SiteFooter />
  </div>
</template>

<script setup>
const siteConfig = await useAsyncStoryblok('config/site-config', {
  version: 'draft',
  resolve_links: 'url',
})
</script>

I also need to set the site title dynamically when using version 2, but the SeoKit component and composable are deprecated. I cannot find how to do this in the documentation (maybe it is there and it's only my bad :D ).

How can I do this?

[stefanobartoletti]

I tried to read the documentation more thoroughly, and according to this paragraph https://nuxtseo.com/site-config/guides/setting-site-config#programmatic-site-config-runtime it seems that what I'm trying to achieve could be done by the updateSiteConfig composable. The relative documentation page is not yet available though.

This is not extremely urgent, but can you please confirm that doing this is indeed possible by using that composable?

[harlan-zw]

Hi @stefanobartoletti, sorry for the delay.

You have quite a number of options in updating the site config, all of them start from using updateSiteConfig. The recommended approach would be using either a nitro or nuxt plugin or middleware.

Here's an example using a Nuxt server plugin.

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

Let me know if you have any questions on usage, will keep this open either way until it's properly documented.

[stefanobartoletti]

Thanks for your reply, I'll try this and let you know if it works in my current setup.

[stefanobartoletti]

Hi @harlan-zw, I'm writing again since I was not able to properly solve this via a plugin.

Apparently, my particular setup based on data coming from Storyblok does not really support getting dynamic data out of the box, and would require me to create some complex custom functions (overriding their module) just to retrieve what is only a single string (for reference: https://github.com/storyblok/storyblok-nuxt/issues/623)

I tried to use updateSiteConfig inside my page template (the main dynamic entry point [...slug].vue) and it works, but I think that it updates the site name client-side since the source HTML doesn't have the proper value. This is not some data that should be reactive, so I think that having this already pre-rendered is the theoretically best way. Do you think that being updated live on the client like this could be a problem for SEO purposes?

Do you have more suggestions about how to use updateSiteConfig in order tho achieve this? The old SeoKit already provided a perfect solution for this.

Thank you again for your support!

[harlan-zw]

Please see https://nuxtseo.com/site-config/guides/runtime-site-config, if you still have issues let me know!