[Feature Request] Add support for a more dynamic configuration

[madebyfabian]

Clear and concise description of the problem

Me again 😄. Just a smaller feature request:

Before using this module, I was defining a dynamic title template (and therefore the site name) based on some external properties, inside app.vue:

const prefix = process.env.NODE_ENV === 'development' ? '⚙️ ' : ''
const dbResult = {
  siteName: '', // some value that is loaded from a database
  description: '', // some value that is loaded from a database
}

useSeoMeta({
  title: 'Home',
  titleTemplate: `${prefix}%s — ${dbResult.siteName || 'Default Website'}`,
  description: dbResult.description || undefined,
})

This was working fine, and allowed me fine-grained control about how to display the title. E.g. on dev, I add a ⚙️ emoji onto the beginning to differentiate the tabs. And, most importantly, the siteName coming from a dynamic source.

nuxt-seo-kit overrides these and since they are not defined in the nuxt.config.ts, because they need to be dynamic, it uses the default values from the plugin, overriding both my titleTemplate and my description meta.

<meta property="og:site_name" content="Nuxt Playground">
<meta name="description" content="My Nuxt v3 website.">
<meta property="og:description" content="My Nuxt v3 website.">

1. Is there a way to make a dynamic site name work? I tried doing <SeoKit :siteName="siteTitle" /> but this does not have an effect, the meta tag is still Vue Playground even though the variable siteTitle is definitely defined.

2. Is there a way to make the titleTemplate from seo meta work? I know there is runtimeConfig.public.titleSeparator but this just acts as a setting to set the title to title seperator title without further config.

Suggested solution

• Add support for defining the properties of this plugin dynamically, e.g. with the <SeoKit /> inside app.vue
• Add support for titleTemplate

Alternative

• Env variables, but it's not really possible to fetch something from the DB and set an env variable for this value.

Additional context

- Operating System: `Darwin`
- Node Version:     `v16.18.1`
- Nuxt Version:     `3.1.1`
- Nitro Version:    `2.0.0`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `extends`, `modules`, `runtimeConfig`, `linkChecker`, `sitemap`, `image`, `turnstile`, `typescript`, `build`, `nitro`, `app`
- Runtime Modules:  `@nuxtjs/[email protected]`, `@nuxt/[email protected]`, `@nuxtjs/[email protected]`, `[email protected]`
- Build Modules:    `-`

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[harlan-zw]

Hey @madebyfabian

This should be solved in in 1.2.1:

• titleTemplate is now root from the nuxt.config, so easier to override
• you can pass props to SeoKit

[madebyfabian]

Hey @harlan-zw Thank you very much 😇

[madebyfabian]

@harlan-zw Thank you again so much, I just implemented it into my project and it works like a charm. Allowing me to inject a dynamic template with dynamic siteName coming from a DB call inside app.vue.

So clean!

// app.vue
const prefix = process.env.NODE_ENV === 'development' ? '⚙️ ' : ''
const siteName = data.value.allSettings.generalSettingsTitle || ''
const siteDescription = data.value.allSettings.generalSettingsDescription || undefined

useSeoMeta({
  titleTemplate: `${prefix}%s %titleSeperator %siteName`,
  title: 'Home',
  description: siteDescription,
})

// nuxt.config.ts
import { generateSitemap } from './generateSitemap'
import { cookieConfig, generateTwicpicsConfig } from './config'

export default defineNuxtConfig({
  extends: ['nuxt-seo-kit'],
  runtimeConfig: {
    public: {
      // ..
      siteUrl: process.env.NUXT_PUBLIC_SITE_URL,
      titleSeperator: '·',
      language: 'en-US',
    },
  },
  // ...
})