From 543db08954bcc61784f5391417b5137041200e30 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Wed, 29 Nov 2023 11:08:32 +0100
Subject: [PATCH 01/16] feat: add `useSetI18nParams` composable

---
 package.json                     |   4 +-
 pnpm-lock.yaml                   |   6 ++
 src/runtime/composables/index.ts |  71 +++++++++++++-
 src/runtime/plugins/i18n.ts      |  14 ++-
 src/runtime/utils.ts             | 163 ++++++++++++++++++++++++++++++-
 5 files changed, 247 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 0a5c5a0a5..f569f6719 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
     "@types/debug": "^4.1.9",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
+    "@unhead/vue": "^1.8.8",
     "bumpp": "^9.2.0",
     "changelogithub": "^0.13.0",
     "consola": "^3",
@@ -130,6 +131,7 @@
     "unbuild": "^2.0.0",
     "undici": "^6.0.1",
     "vitest": "^1.0.0",
+    "unhead": "^1.8.8",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
@@ -152,4 +154,4 @@
   "engines": {
     "node": "^14.16.0 || >=16.11.0"
   }
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 99c4847df..74988ea15 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^6.7.4
         version: 6.13.2(eslint@8.55.0)(typescript@5.3.2)
+      '@unhead/vue':
+        specifier: ^1.8.8
+        version: 1.8.8(vue@3.3.10)
       bumpp:
         specifier: ^9.2.0
         version: 9.2.0
@@ -167,6 +170,9 @@ importers:
       undici:
         specifier: ^6.0.1
         version: 6.0.1
+      unhead:
+        specifier: ^1.8.8
+        version: 1.8.8
       vitest:
         specifier: ^1.0.0
         version: 1.0.1(jsdom@23.0.1)
diff --git a/src/runtime/composables/index.ts b/src/runtime/composables/index.ts
index 06136106b..2f74135b8 100644
--- a/src/runtime/composables/index.ts
+++ b/src/runtime/composables/index.ts
@@ -1,10 +1,13 @@
-import { useRoute, useRouter, useRequestHeaders, useCookie, useNuxtApp } from '#imports'
+import { useRoute, useRouter, useRequestHeaders, useCookie, useNuxtApp, useState } from '#imports'
 import { ref } from 'vue'
 import { parseAcceptLanguage } from '../internal'
 import { nuxtI18nInternalOptions, nuxtI18nOptionsDefault, localeCodes as _localeCodes } from '#build/i18n.options.mjs'
+import { getActiveHead } from 'unhead'
 import {
   getComposer,
   findBrowserLocale,
+  getLocale,
+  getLocales,
   useRouteBaseName as _useRouteBaseName,
   useLocalePath as _useLocalePath,
   useLocaleRoute as _useLocaleRoute,
@@ -18,7 +21,71 @@ import type { DetectBrowserLanguageOptions } from '#build/i18n.options.mjs'
 export * from 'vue-i18n'
 export * from './shared'
 export type { LocaleObject } from 'vue-i18n-routing'
-import type { Locale } from 'vue-i18n'
+import { type Locale, type LocaleMessages, type DefineLocaleMessage, type I18nOptions, useI18n } from 'vue-i18n'
+import type { LocaleObject } from 'vue-i18n-routing'
+import {
+  addAlternateOgLocales,
+  addCanonicalLinksAndOgUrl,
+  addCurrentOgLocale,
+  addHreflangLinks,
+  getNormalizedLocales,
+  type HeadParam
+} from '../utils'
+
+/**
+ * Returns a function to set i18n params.
+ *
+ * @param options - An options, see about details {@link I18nHeadOptions}.
+ *
+ * @returns setI18nParams {@link I18nHeadMetaInfo | head properties}.
+ *
+ * @public
+ */
+export function useSetI18nParams(
+  options?: Pick<
+    NonNullable<Parameters<typeof _useLocaleHead>[0]>,
+    'addDirAttribute' | 'addSeoAttributes' | 'identifierAttribute' | 'route' | 'router' | 'i18n'
+  >
+) {
+  const i18n = useI18n()
+  const head = getActiveHead()
+  const locale = getLocale(i18n)
+  const locales = getNormalizedLocales(getLocales(i18n))
+  const metaState = useState<Record<string, unknown>>('nuxt-i18n-meta')
+  const addDirAttribute = options?.addDirAttribute ?? true
+  const addSeoAttributes = options?.addSeoAttributes ?? true
+  const idAttribute = options?.identifierAttribute ?? 'id'
+
+  const currentLocale = getNormalizedLocales(locales).find(l => l.code === locale) || { code: locale }
+  const currentLocaleIso = currentLocale.iso
+  const currentLocaleDir = currentLocale.dir || i18n.defaultDirection
+
+  const setMeta = () => {
+    const metaObject: HeadParam = {
+      htmlAttrs: {
+        dir: addDirAttribute ? currentLocaleDir : undefined,
+        lang: addSeoAttributes && locale && i18n.locales ? currentLocaleIso : undefined
+      },
+      link: [],
+      meta: []
+    }
+
+    // Adding SEO Meta
+    if (addSeoAttributes && locale && i18n.locales) {
+      addHreflangLinks(locales as LocaleObject[], metaObject, idAttribute)
+      addCanonicalLinksAndOgUrl(metaObject, idAttribute, addSeoAttributes)
+      addCurrentOgLocale(currentLocale, currentLocaleIso, metaObject, idAttribute)
+      addAlternateOgLocales(locales as LocaleObject[], currentLocaleIso, metaObject, idAttribute)
+    }
+
+    head?.push(metaObject)
+  }
+
+  return function (params: Record<string, unknown>) {
+    metaState.value = { ...params }
+    setMeta()
+  }
+}
 
 /**
  * The `useRouteBaseName` composable returns a function that gets the route's base name.
diff --git a/src/runtime/plugins/i18n.ts b/src/runtime/plugins/i18n.ts
index c8ae768c6..bbe96d0e0 100644
--- a/src/runtime/plugins/i18n.ts
+++ b/src/runtime/plugins/i18n.ts
@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 import {
   createLocaleFromRouteGetter,
@@ -13,7 +13,14 @@ import {
   getLocale,
   getComposer
 } from 'vue-i18n-routing'
-import { defineNuxtPlugin, useRouter, useRoute, addRouteMiddleware, defineNuxtRouteMiddleware } from '#imports'
+import {
+  defineNuxtPlugin,
+  useRouter,
+  useRoute,
+  addRouteMiddleware,
+  defineNuxtRouteMiddleware,
+  useState
+} from '#imports'
 import {
   localeCodes,
   vueI18nConfigs,
@@ -104,7 +111,8 @@ export default defineNuxtPlugin({
       ...nuxtI18nOptions,
       dynamicRouteParamsKey: 'nuxtI18n',
       switchLocalePathIntercepter: extendSwitchLocalePathIntercepter(differentDomains, normalizedLocales, nuxtContext),
-      prefixable: extendPrefixable(differentDomains)
+      prefixable: extendPrefixable(differentDomains),
+      dynamicParamsInterceptor: () => useState('nuxt-i18n-meta', () => ref({}))
     })
 
     const getDefaultLocale = (defaultLocale: string) => defaultLocale || vueI18nOptions.locale || 'en-US'
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
index 9848846b8..3145be52e 100644
--- a/src/runtime/utils.ts
+++ b/src/runtime/utils.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
+import { useI18n } from 'vue-i18n'
 import {
   getLocale,
   setLocale,
@@ -13,11 +13,14 @@ import {
   DefaultPrefixable,
   DefaultSwitchLocalePathIntercepter,
   getComposer,
-  useSwitchLocalePath
+  useLocaleRoute,
+  useRouteBaseName,
+  useSwitchLocalePath,
+  STRATEGIES
 } from 'vue-i18n-routing'
 import { joinURL, isEqual } from 'ufo'
-import { isString, isFunction, isObject } from '@intlify/shared'
-import { navigateTo, useState } from '#imports'
+import { isString, isFunction, isArray, isObject } from '@intlify/shared'
+import { navigateTo, useRoute, useState } from '#imports'
 import { nuxtI18nInternalOptions, nuxtI18nOptionsDefault, NUXT_I18N_MODULE_ID, isSSG } from '#build/i18n.options.mjs'
 import {
   detectBrowserLanguage,
@@ -39,7 +42,8 @@ import type {
   RouteLocationNormalizedLoaded,
   BaseUrlResolveHandler,
   PrefixableOptions,
-  SwitchLocalePathIntercepter
+  SwitchLocalePathIntercepter,
+  I18nHeadOptions
 } from 'vue-i18n-routing'
 import type { I18n, I18nOptions, Locale, FallbackLocale, LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
 import type { NuxtApp } from '#app'
@@ -47,6 +51,7 @@ import type { NuxtI18nOptions, DetectBrowserLanguageOptions, RootRedirectOptions
 import type { DeepRequired } from 'ts-essentials'
 import type { DetectLocaleContext } from './internal'
 import type { LocaleLoader as LocaleInternalLoader } from './messages'
+import type { HeadSafe } from '@unhead/vue'
 
 export function _setLocale(i18n: I18n, locale: Locale) {
   return callVueI18nInterfaces(i18n, 'setLocale', locale)
@@ -491,3 +496,151 @@ export function extendBaseUrl<Context extends NuxtApp = NuxtApp>(
 }
 
 /* eslint-enable @typescript-eslint/no-explicit-any */
+
+export type HeadParam = Required<Pick<HeadSafe, 'htmlAttrs' | 'meta' | 'link'>>
+type IdParam = NonNullable<I18nHeadOptions['identifierAttribute']>
+
+export function addHreflangLinks(locales: LocaleObject[], head: HeadParam, idAttribute: IdParam) {
+  const { defaultLocale, strategy, baseUrl } = useI18n()
+  const switchLocalePath = useSwitchLocalePath()
+
+  if (strategy === STRATEGIES.NO_PREFIX) {
+    return
+  }
+
+  const localeMap = new Map<string, LocaleObject>()
+  const links = []
+  for (const locale of locales) {
+    const localeIso = locale.iso
+
+    if (!localeIso) {
+      console.warn('Locale ISO code is required to generate alternate link')
+      continue
+    }
+
+    const [language, region] = localeIso.split('-')
+    if (language && region && (locale.isCatchallLocale || !localeMap.has(language))) {
+      localeMap.set(language, locale)
+    }
+
+    localeMap.set(localeIso, locale)
+  }
+
+  for (const [iso, mapLocale] of localeMap.entries()) {
+    const localePath = switchLocalePath(mapLocale.code)
+    if (localePath) {
+      links.push({
+        [idAttribute]: `i18n-alt-${iso}`,
+        rel: 'alternate',
+        href: toAbsoluteUrl(localePath, baseUrl.value),
+        hreflang: iso
+      })
+    }
+  }
+
+  if (defaultLocale) {
+    const localePath = switchLocalePath(defaultLocale)
+    if (localePath) {
+      links.push({
+        [idAttribute]: 'i18n-xd',
+        rel: 'alternate2',
+        href: toAbsoluteUrl(localePath, baseUrl.value),
+        hreflang: 'x-default'
+      })
+    }
+  }
+
+  head.link.push(...links)
+}
+
+export function addCanonicalLinksAndOgUrl(
+  head: HeadParam,
+  idAttribute: IdParam,
+  seoAttributesOptions: I18nHeadOptions['addSeoAttributes']
+) {
+  const { baseUrl } = useI18n()
+  const route = useRoute()
+  const localeRoute = useLocaleRoute()
+  const getRouteBaseName = useRouteBaseName()
+  const currentRoute = localeRoute({ ...route, name: getRouteBaseName.call(route) })
+
+  if (!currentRoute) return
+  let href = toAbsoluteUrl(currentRoute.path, baseUrl.value)
+
+  const canonicalQueries = (isObject(seoAttributesOptions) && seoAttributesOptions.canonicalQueries) || []
+  const currentRouteQueryParams = currentRoute.query
+  const params = new URLSearchParams()
+  for (const queryParamName of canonicalQueries) {
+    if (queryParamName in currentRouteQueryParams) {
+      const queryParamValue = currentRouteQueryParams[queryParamName]
+
+      if (isArray(queryParamValue)) {
+        queryParamValue.forEach(v => params.append(queryParamName, v || ''))
+      } else {
+        params.append(queryParamName, queryParamValue || '')
+      }
+    }
+  }
+
+  const queryString = params.toString()
+  if (queryString) {
+    href = `${href}?${queryString}`
+  }
+
+  head.link.push({ [idAttribute]: 'i18n-can', rel: 'canonical', href })
+  head.meta.push({ [idAttribute]: 'i18n-og-url', property: 'og:url', content: href })
+}
+
+export function addCurrentOgLocale(
+  currentLocale: LocaleObject,
+  currentIso: string | undefined,
+  head: HeadParam,
+  idAttribute: IdParam
+) {
+  if (!currentLocale || !currentIso) return
+
+  head.meta.push({
+    [idAttribute]: 'i18n-og',
+    property: 'og:locale',
+    // Replace dash with underscore as defined in spec: language_TERRITORY
+    content: hypenToUnderscore(currentIso)
+  })
+}
+
+export function addAlternateOgLocales(
+  locales: LocaleObject[],
+  currentIso: string | undefined,
+  head: HeadParam,
+  idAttribute: IdParam
+) {
+  const alternateLocales = locales.filter(locale => locale.iso && locale.iso !== currentIso)
+
+  for (const locale of alternateLocales) {
+    head.meta.push({
+      [idAttribute]: `i18n-og-alt-${locale.iso}`,
+      property: 'og:locale:alternate',
+      content: hypenToUnderscore(locale.iso!)
+    })
+  }
+}
+
+function hypenToUnderscore(str: string) {
+  return (str || '').replace(/-/g, '_')
+}
+
+function toAbsoluteUrl(urlOrPath: string, baseUrl: string) {
+  if (urlOrPath.match(/^https?:\/\//)) return urlOrPath
+  return baseUrl + urlOrPath
+}
+
+export function getNormalizedLocales(locales: string[] | LocaleObject[]): LocaleObject[] {
+  const normalized: LocaleObject[] = []
+  for (const locale of locales) {
+    if (isString(locale)) {
+      normalized.push({ code: locale })
+      continue
+    }
+    normalized.push(locale)
+  }
+  return normalized
+}

From 743153d5c8063d9e2f2ee0a8e2ee0af7615f9ff1 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Wed, 29 Nov 2023 11:09:04 +0100
Subject: [PATCH 02/16] test: test `useI18nParams` composable

---
 specs/basic_usage.spec.ts                     |  9 +++++
 specs/fixtures/basic_usage/app.vue            |  6 ++++
 .../basic_usage/components/LangSwitcher.vue   |  1 +
 specs/fixtures/basic_usage/pages/products.vue | 31 ++++++++++++++++
 .../basic_usage/pages/products/[slug].vue     | 36 +++++++++++++++++++
 .../basic_usage/server/api/products-data.ts   | 35 ++++++++++++++++++
 .../basic_usage/server/api/products.ts        | 19 ++++++++++
 .../server/api/products/[product].ts          | 27 ++++++++++++++
 8 files changed, 164 insertions(+)
 create mode 100644 specs/fixtures/basic_usage/pages/products.vue
 create mode 100644 specs/fixtures/basic_usage/pages/products/[slug].vue
 create mode 100644 specs/fixtures/basic_usage/server/api/products-data.ts
 create mode 100644 specs/fixtures/basic_usage/server/api/products.ts
 create mode 100644 specs/fixtures/basic_usage/server/api/products/[product].ts

diff --git a/specs/basic_usage.spec.ts b/specs/basic_usage.spec.ts
index 41cc73023..0bef65b69 100644
--- a/specs/basic_usage.spec.ts
+++ b/specs/basic_usage.spec.ts
@@ -319,3 +319,12 @@ test('server integration extended from `layers/layer-server`', async () => {
   const resQuery = await $fetch('/api/server', { query: { key: 'snakeCaseText', locale: 'fr' } })
   expect(resQuery?.snakeCaseText).toMatch('À-propos-de-ce-site')
 })
+
+test('dynamic parameters', async () => {
+  const { page } = await renderPage('/products/big-chair')
+  console.log(await page.content())
+  expect(await page.locator('#switch-nuxt-link-nl').getAttribute('href')).toEqual('/nl/products/grote-stoel')
+
+  await gotoPath(page, '/nl/products/rode-mok')
+  expect(await page.locator('#switch-nuxt-link-en').getAttribute('href')).toEqual('/products/red-mug')
+})
diff --git a/specs/fixtures/basic_usage/app.vue b/specs/fixtures/basic_usage/app.vue
index f8eacfa73..b3e68f671 100644
--- a/specs/fixtures/basic_usage/app.vue
+++ b/specs/fixtures/basic_usage/app.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { useLocaleHead } from 'vue-i18n-routing'
+
+const head = useLocaleHead({ addSeoAttributes: true })
+</script>
+
 <template>
   <NuxtLayout>
     <NuxtPage />
diff --git a/specs/fixtures/basic_usage/components/LangSwitcher.vue b/specs/fixtures/basic_usage/components/LangSwitcher.vue
index 06c6f6b45..c341b3430 100644
--- a/specs/fixtures/basic_usage/components/LangSwitcher.vue
+++ b/specs/fixtures/basic_usage/components/LangSwitcher.vue
@@ -21,6 +21,7 @@ const localesExcludingCurrent = computed(() => {
         :id="`nuxt-locale-link-${locale.code}`"
         :key="index"
         :exact="true"
+        :id="`switch-nuxt-link-${locale.code}`"
         :to="switchLocalePath(locale.code)"
         >{{ locale.name }}</NuxtLink
       >
diff --git a/specs/fixtures/basic_usage/pages/products.vue b/specs/fixtures/basic_usage/pages/products.vue
new file mode 100644
index 000000000..f4fa94c50
--- /dev/null
+++ b/specs/fixtures/basic_usage/pages/products.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { ref, onMounted } from '#imports'
+import LangSwitcher from '../components/LangSwitcher.vue'
+const products = ref([])
+const { locale } = useI18n()
+const localePath = useLocalePath()
+
+onMounted(async () => {
+  products.value = await $fetch(`/api/products`)
+})
+</script>
+
+<template>
+  <div>
+    <LangSwitcher />
+    <NuxtLink
+      class="product"
+      v-for="product in products"
+      :key="product.id"
+      :to="localePath({ name: 'products-slug', params: { slug: product?.slugs?.[locale] ?? 'none' } })"
+      >{{ product.name?.[locale] }}
+    </NuxtLink>
+    <NuxtPage />
+  </div>
+</template>
+
+<style>
+.product {
+  padding: 1em 0.5em;
+}
+</style>
diff --git a/specs/fixtures/basic_usage/pages/products/[slug].vue b/specs/fixtures/basic_usage/pages/products/[slug].vue
new file mode 100644
index 000000000..391388085
--- /dev/null
+++ b/specs/fixtures/basic_usage/pages/products/[slug].vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useI18n, useLocalePath, useSetI18nParams } from '#i18n'
+import { ref, computed, onMounted, useHead, useRoute } from '#imports'
+import LangSwitcher from '@/components/LangSwitcher.vue'
+const product = ref()
+const { locale } = useI18n()
+const localePath = useLocalePath()
+const route = useRoute()
+const head = useHead({})
+
+const setI18nParams = useSetI18nParams({ addSeoAttributes: true })
+product.value = await $fetch(`/api/products/${route.params.slug}`)
+if (product.value != null) {
+  const availableLocales = Object.keys(product.value.slugs)
+  const slugs: Record<string, string> = {}
+
+  for (const l of availableLocales) {
+    slugs[l] = { slug: product.value.slugs[l] }
+  }
+
+  setI18nParams(slugs)
+}
+</script>
+
+<template>
+  <div>
+    <section class="product">{{ product?.name?.[locale] }}</section>
+    <LangSwitcher />
+  </div>
+</template>
+
+<style>
+.product {
+  padding: 1em 0.5em;
+}
+</style>
diff --git a/specs/fixtures/basic_usage/server/api/products-data.ts b/specs/fixtures/basic_usage/server/api/products-data.ts
new file mode 100644
index 000000000..a8c8ab0c8
--- /dev/null
+++ b/specs/fixtures/basic_usage/server/api/products-data.ts
@@ -0,0 +1,35 @@
+export default [
+  {
+    id: 1,
+    name: {
+      en: 'Red mug',
+      nl: 'Rode mok'
+    },
+    slugs: {
+      en: 'red-mug',
+      nl: 'rode-mok'
+    }
+  },
+  {
+    id: 2,
+    name: {
+      en: 'Big chair',
+      nl: 'Grote stoel'
+    },
+    slugs: {
+      en: 'big-chair',
+      nl: 'grote-stoel'
+    }
+  },
+  {
+    id: 3,
+    name: {
+      en: 'Standing desk',
+      nl: 'Sta bureau'
+    },
+    slugs: {
+      en: 'standing-desk',
+      nl: 'sta-bureau'
+    }
+  }
+]
diff --git a/specs/fixtures/basic_usage/server/api/products.ts b/specs/fixtures/basic_usage/server/api/products.ts
new file mode 100644
index 000000000..3afba59b6
--- /dev/null
+++ b/specs/fixtures/basic_usage/server/api/products.ts
@@ -0,0 +1,19 @@
+import type { LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
+import productsData from './products-data'
+/**
+ * NOTE:
+ *  locale resources is managed on backend examples
+ */
+
+const locales: LocaleMessages<DefineLocaleMessage> = {
+  'en-GB': {
+    settings: {
+      profile: 'Profile'
+    }
+  },
+  ja: {}
+}
+
+export default defineEventHandler(event => {
+  return productsData
+})
diff --git a/specs/fixtures/basic_usage/server/api/products/[product].ts b/specs/fixtures/basic_usage/server/api/products/[product].ts
new file mode 100644
index 000000000..e771e17d5
--- /dev/null
+++ b/specs/fixtures/basic_usage/server/api/products/[product].ts
@@ -0,0 +1,27 @@
+import type { LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
+import productsData from '../products-data'
+
+/**
+ * NOTE:
+ *  locale resources is managed on backend examples
+ */
+
+const locales: LocaleMessages<DefineLocaleMessage> = {
+  'en-GB': {
+    settings: {
+      profile: 'Profile'
+    }
+  },
+  ja: {}
+}
+
+export default defineEventHandler(event => {
+  const slug = event.context.params?.product
+  const found = productsData.find(x => Object.values(x.slugs).includes(slug))
+
+  if (found == null) {
+    return {}
+  }
+
+  return found
+})

From 412875e907182fa4cadc7d94628272f258354e63 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Wed, 29 Nov 2023 11:09:32 +0100
Subject: [PATCH 03/16] chore: add `useSetI18nParams` to playground

---
 playground/layouts/default.vue              |  9 +++--
 playground/pages/products.vue               | 43 +++++++++++++++++++++
 playground/pages/products/[slug].vue        | 36 +++++++++++++++++
 playground/server/api/locales/[locale].ts   |  8 +++-
 playground/server/api/products-data.ts      | 35 +++++++++++++++++
 playground/server/api/products.ts           |  3 ++
 playground/server/api/products/[product].ts | 14 +++++++
 src/runtime/utils.ts                        |  2 +-
 8 files changed, 145 insertions(+), 5 deletions(-)
 create mode 100644 playground/pages/products.vue
 create mode 100644 playground/pages/products/[slug].vue
 create mode 100644 playground/server/api/products-data.ts
 create mode 100644 playground/server/api/products.ts
 create mode 100644 playground/server/api/products/[product].ts

diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
index 42194425f..579561bd1 100644
--- a/playground/layouts/default.vue
+++ b/playground/layouts/default.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { useSetI18nParams, useLocaleHead } from '#i18n'
+import { useHead } from '#imports'
+
 const route = useRoute()
 const { t } = useI18n()
 const head = useLocaleHead({ addSeoAttributes: true })
@@ -7,8 +10,8 @@ const title = computed(() => t('layouts.title', { title: t(route.meta.title ?? '
 
 <template>
   <div>
-    <Html :lang="head.htmlAttrs.lang">
-      <Head>
+    <Html>
+      <Head :lang="head.htmlAttrs.lang">
         <Title>{{ title }}</Title>
         <template v-for="link in head.link" :key="link.hid">
           <Link :id="link.hid" :rel="link.rel" :href="link.href" :hreflang="link.hreflang" />
@@ -21,7 +24,7 @@ const title = computed(() => t('layouts.title', { title: t(route.meta.title ?? '
         <slot />
         <div>
           <h2>I18n Head</h2>
-          <code>{{ head }}</code>
+          <pre>{{ head }}</pre>
         </div>
       </Body>
     </Html>
diff --git a/playground/pages/products.vue b/playground/pages/products.vue
new file mode 100644
index 000000000..a927dcd11
--- /dev/null
+++ b/playground/pages/products.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+const { locale, locales } = useI18n()
+const localePath = useLocalePath()
+const switchLocalePath = useSwitchLocalePath()
+
+const { data } = await useAsyncData('products', () => $fetch(`/api/products`))
+definePageMeta({
+  pageTransition: {
+    name: 'page',
+    mode: 'out-in',
+    onBeforeEnter: async () => {
+      const { finalizePendingLocaleChange } = useNuxtApp().$i18n
+      await finalizePendingLocaleChange()
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <nav style="padding: 1em">
+      <span v-for="locale in locales" :key="locale.code">
+        <NuxtLink :to="switchLocalePath(locale.code) || ''">{{ locale.name }}</NuxtLink> |
+      </span>
+    </nav>
+    {{ locale }}
+    <NuxtLink
+      class="product"
+      v-for="product in data"
+      :key="product.id"
+      :to="localePath({ name: 'products-slug', params: { slug: product?.slugs?.[locale] ?? 'none' } })"
+    >
+      {{ product.name?.[locale] }}
+    </NuxtLink>
+    <NuxtPage />
+  </div>
+</template>
+
+<style>
+.product {
+  padding: 1em 0.5em;
+}
+</style>
diff --git a/playground/pages/products/[slug].vue b/playground/pages/products/[slug].vue
new file mode 100644
index 000000000..874730d4f
--- /dev/null
+++ b/playground/pages/products/[slug].vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useI18n, useLocalePath, useSetI18nParams, useSwitchLocalePath } from '#i18n'
+import { ref, computed, onMounted, useHead, useRoute } from '#imports'
+// import LangSwitcher from '@/components/LangSwitcher.vue'
+const product = ref()
+const { locale, locales } = useI18n()
+const route = useRoute()
+
+const setI18nParams = useSetI18nParams()
+const { data, pending } = await useAsyncData(`products-${route.params.slug}`, () =>
+  $fetch(`/api/products/${route.params.slug}`)
+)
+
+if (data.value != null) {
+  const availableLocales = Object.keys(data.value.slugs)
+  const slugs: Record<string, string> = {}
+
+  for (const l of availableLocales) {
+    slugs[l] = { slug: data.value.slugs[l] }
+  }
+
+  setI18nParams(slugs)
+}
+</script>
+
+<template>
+  <div>
+    <section class="product">{{ pending ? 'loading' : data?.name?.[locale] }}</section>
+  </div>
+</template>
+
+<style>
+.product {
+  padding: 1em 0.5em;
+}
+</style>
diff --git a/playground/server/api/locales/[locale].ts b/playground/server/api/locales/[locale].ts
index 6ed957935..8759a26a8 100644
--- a/playground/server/api/locales/[locale].ts
+++ b/playground/server/api/locales/[locale].ts
@@ -7,11 +7,13 @@ import type { LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
 
 const locales: LocaleMessages<DefineLocaleMessage> = {
   'en-GB': {
+    id: new Date().toISOString(),
     settings: {
       profile: 'Profile'
     }
   },
   ja: {
+    id: new Date().toISOString(),
     layouts: {
       title: 'ページ ー {title}'
     },
@@ -26,8 +28,12 @@ const locales: LocaleMessages<DefineLocaleMessage> = {
   }
 }
 
-export default defineEventHandler(event => {
+export default defineEventHandler(async event => {
   const locale = event.context.params?.locale
+  locales['en-GB'].id = new Date().toISOString()
+  locales['ja'].id = new Date().toISOString()
+
+  await new Promise(resolve => setTimeout(resolve, 5000))
   if (locale == null) {
     return {}
   }
diff --git a/playground/server/api/products-data.ts b/playground/server/api/products-data.ts
new file mode 100644
index 000000000..a8c8ab0c8
--- /dev/null
+++ b/playground/server/api/products-data.ts
@@ -0,0 +1,35 @@
+export default [
+  {
+    id: 1,
+    name: {
+      en: 'Red mug',
+      nl: 'Rode mok'
+    },
+    slugs: {
+      en: 'red-mug',
+      nl: 'rode-mok'
+    }
+  },
+  {
+    id: 2,
+    name: {
+      en: 'Big chair',
+      nl: 'Grote stoel'
+    },
+    slugs: {
+      en: 'big-chair',
+      nl: 'grote-stoel'
+    }
+  },
+  {
+    id: 3,
+    name: {
+      en: 'Standing desk',
+      nl: 'Sta bureau'
+    },
+    slugs: {
+      en: 'standing-desk',
+      nl: 'sta-bureau'
+    }
+  }
+]
diff --git a/playground/server/api/products.ts b/playground/server/api/products.ts
new file mode 100644
index 000000000..ee2225b2c
--- /dev/null
+++ b/playground/server/api/products.ts
@@ -0,0 +1,3 @@
+import productsData from './products-data'
+
+export default defineEventHandler(event => productsData)
diff --git a/playground/server/api/products/[product].ts b/playground/server/api/products/[product].ts
new file mode 100644
index 000000000..28c977d0c
--- /dev/null
+++ b/playground/server/api/products/[product].ts
@@ -0,0 +1,14 @@
+import productsData from '../products-data'
+
+export default defineEventHandler(async event => {
+  const slug = event.context.params?.product
+  const found = productsData.find(x => Object.values(x.slugs).includes(slug))
+
+  // await new Promise(resolve => setTimeout(resolve, 600))
+
+  if (found == null) {
+    return {}
+  }
+
+  return found
+})
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
index 3145be52e..a3a510819 100644
--- a/src/runtime/utils.ts
+++ b/src/runtime/utils.ts
@@ -543,7 +543,7 @@ export function addHreflangLinks(locales: LocaleObject[], head: HeadParam, idAtt
     if (localePath) {
       links.push({
         [idAttribute]: 'i18n-xd',
-        rel: 'alternate2',
+        rel: 'alternate',
         href: toAbsoluteUrl(localePath, baseUrl.value),
         hreflang: 'x-default'
       })

From ed0ddd2d0d7e0664f5358765f2ddb1907d26c78e Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Wed, 29 Nov 2023 18:39:29 +0100
Subject: [PATCH 04/16] docs: remove and replace dynamic parameter usage with
 `useSetI18nParams`

---
 docs/content/2.guide/19.migrating.md          |  3 +-
 docs/content/2.guide/9.lang-switcher.md       | 45 +++++++++----------
 docs/content/3.options/2.routing.md           | 44 ------------------
 docs/content/4.API/1.composables.md           | 23 ++++++++++
 specs/fixtures/issues/2020/nuxt.config.ts     |  1 -
 .../switcher/pages/[...pathMatch].vue         |  9 ++--
 specs/fixtures/switcher/pages/post/[id].vue   |  9 ++--
 specs/lang_switcher.spec.ts                   |  3 +-
 8 files changed, 55 insertions(+), 82 deletions(-)

diff --git a/docs/content/2.guide/19.migrating.md b/docs/content/2.guide/19.migrating.md
index 696e2f2a2..600546012 100644
--- a/docs/content/2.guide/19.migrating.md
+++ b/docs/content/2.guide/19.migrating.md
@@ -134,7 +134,7 @@ Use the `customRoutes` option. because the option name `parsePages` is not intui
 
 ### Deprecated `vuex` option
 
-Use `dynamicRouteParams` option. Because Vuex is no longer required by the Nuxt i18n module.
+Vuex is no longer required by the Nuxt i18n module, use the `useSetI18nParams` composable to set dynamic route parameters instead.
 
 ```diff {}[nuxt.config.js]
  export default defineNuxtConfig({
@@ -145,7 +145,6 @@ Use `dynamicRouteParams` option. Because Vuex is no longer required by the Nuxt
    i18n: {
      // ...
 -    vuex: true,
-+    dynamicRouteParams: true,
      // ...
    }
  })
diff --git a/docs/content/2.guide/9.lang-switcher.md b/docs/content/2.guide/9.lang-switcher.md
index cd976db2c..7477dd960 100644
--- a/docs/content/2.guide/9.lang-switcher.md
+++ b/docs/content/2.guide/9.lang-switcher.md
@@ -80,57 +80,56 @@ const availableLocales = computed(() => {
 
 ## Dynamic route parameters
 
-Dealing with dynamic route parameters requires a bit more work because you need to provide parameters translations to **Nuxt i18n module**. For this purpose, **Nuxt i18n module** uses params which are configured by `definePageMeta`. These will be merged with route params when generating lang switch routes with `switchLocalePath()`.
+Dealing with dynamic route parameters requires a bit more work because you need to provide parameters translations to **Nuxt i18n module**. The composable `useSetI18nParams` can be used to set translations for route parameters, this is used to set SEO tags as well as changing the routes returned by `switchLocalePath`.
 
 ::alert{type="warning"}
+During SSR it matters when and where you set i18n parameters, since there is no reactivity during SSR.
+:br :br
+For example projects with a lang switcher (with `switchLocalePath`) in the layout and fetching data in a page, setting i18n parameters in the page will result in a hydration mismatch. As the layout and its components have already been rendered and do not update reactively by changes introduced by pages and components further down the tree.
+:br :br
 
-You have to set the `dynamicRouteParams` option to `true` in **Nuxt i18n module**'s options to enable dynamic route parameters.
-
+This is not the case for SEO tags, these are updated correctly during SSR regardless of when and where i18n parameters are set.
 ::
 
-An example (replace `id` with the applicable route parameter):
-
+An example (replace `slug` with the applicable route parameter):
 ```vue
 <script setup>
-definePageMeta({
-  // ...
-  nuxtI18n: {
-    en: { id: 'my-post' },
-    fr: { id: 'mon-article' }
-  }
-  // ...
+// fetch product from API... (red mug)
+
+const setI18nParams = useSetI18nParams();
+setI18nParams({
+  en: { slug: data.slugs.en }, // slug: 'red-mug' 
+  nl: { slug: data.slugs.nl }  // slug: 'rode-mok'
 })
+
+const switchLocalePath = useSwitchLocalePath()
+switchLocalePath('en') // /products/red-mug
+switchLocalePath('nl') // /products/rode-mok
 </script>
 
 <template>
-  <!-- pages/post/[id].vue -->
+  <!-- pages/products/[slug].vue -->
 </template>
-
 ```
 
 Note that for the special case of a catch-all route named like `[...pathMatch.vue]`, the key of the object needs to say `pathMatch`. For example:
 
 ```vue
 <script>
-definePageMeta({
-  // ...
-  nuxtI18n: {
-    en: { pathMatch: ['not-found-my-post'] },
-    fr: { pathMatch: ['not-found-mon-article'] }
-  }
-  // ...
+const setI18nParams = useSetI18nParams()
+setI18nParams({
+  en: { pathMatch: ['not-found-my-post'] },
+  fr: { pathMatch: ['not-found-mon-article'] }
 })
 </script>
 
 <template>
   <!-- pages/[...pathMatch].vue -->
 </template>
-
 ```
 
 Note that a catch all route is defined **as an array**. In this case, there is only one element, but if you want to use a sub-path, for example `/not-found/post`, define multiple elements as in `['not-found', 'post']`. You will need to define more than one, e.g. `['not-found', 'post']`.
 
-
 ::alert{type="info"}
 **Nuxt i18n module** won't reset parameters translations for you, this means that if you use identical parameters for different routes, navigating between those routes might result in conflicting parameters. Make sure you always set params translations in such cases.
 ::
diff --git a/docs/content/3.options/2.routing.md b/docs/content/3.options/2.routing.md
index 8c6b66afd..0e68b44b8 100644
--- a/docs/content/3.options/2.routing.md
+++ b/docs/content/3.options/2.routing.md
@@ -126,47 +126,3 @@ Set to a path to which you want to redirect users accessing the root URL (`/`).
   path: 'about-us'
 }
 ```
-
-## `dynamicRouteParams`
-
-- type: `boolean`
-- default: `false`
-
-Whether to localize dynamic route parameters. 
-
-If `true`, you can set the dynamic route parameter to `nuxtI18n` field of `definePageMeta` for each locale:
-
-```ts {}[nuxt.config.ts]
-export default defineNuxtConfig({
-  modules: [
-    '@nuxtjs/i18n'
-  ],
-
-  i18n: {
-    // ...
-    dynamicRouteParams: true,
-    // ...
-  },
-
-  // ...
-})
-```
-
-```vue
-<script setup>
-definePageMeta({
-  // ...
-  nuxtI18n: {
-    en: { id: 'my-post' },
-    fr: { id: 'mon-article' }
-  }
-  // ...
-})
-</script>
-
-<template>
-  <!-- pages/post/[id].vue -->
-</template>
-```
-
-See more information in [Dynamic route parameters](/guide/lang-switcher#dynamic-route-parameters)
diff --git a/docs/content/4.API/1.composables.md b/docs/content/4.API/1.composables.md
index 12f85d3c0..bb2d3a882 100644
--- a/docs/content/4.API/1.composables.md
+++ b/docs/content/4.API/1.composables.md
@@ -124,6 +124,29 @@ An object accepting the following optional fields:
   Identifier attribute of `<meta>` tag, default `'hid'`.
 
 
+
+## `useSetI18nParams`
+
+The `useSetI18nParams` returns a function to set translated parameters for the current route.
+
+### Type
+
+```ts
+declare function useSetI18nParams(): (locale: Record<Locale, unknown>) => void;
+```
+
+An example, locale loading with fetch:
+```vue
+<script setup>
+const setI18nParams = useSetI18nParams();
+setI18nParams({
+  en: { slug: 'red-mug' },
+  nl: { slug: 'rode-mok' }
+})
+</script>
+```
+
+
 ## `useRouteBaseName`
 
 The `useRouteBaseName` composable returns a function that gets the route's base name.  `useRouteBaseName` is powered by [vue-i18n-routing](https://github.com/intlify/routing/tree/main/packages/vue-i18n-routing).
diff --git a/specs/fixtures/issues/2020/nuxt.config.ts b/specs/fixtures/issues/2020/nuxt.config.ts
index 513cb3f24..bbf21fa01 100644
--- a/specs/fixtures/issues/2020/nuxt.config.ts
+++ b/specs/fixtures/issues/2020/nuxt.config.ts
@@ -16,7 +16,6 @@ export default defineNuxtConfig({
         iso: 'en-US'
       }
     ],
-    dynamicRouteParams: true,
     defaultLocale: 'fr',
     strategy: 'prefix'
   }
diff --git a/specs/fixtures/switcher/pages/[...pathMatch].vue b/specs/fixtures/switcher/pages/[...pathMatch].vue
index 26a7edb4a..d7495135d 100644
--- a/specs/fixtures/switcher/pages/[...pathMatch].vue
+++ b/specs/fixtures/switcher/pages/[...pathMatch].vue
@@ -3,11 +3,10 @@ import LangSwitcher from '../components/LangSwitcher.vue'
 
 const route = useRoute()
 
-definePageMeta({
-  nuxtI18n: {
-    en: { pathMatch: ['my-post', 'abc'] },
-    fr: { pathMatch: ['mon-article', 'xyz'] }
-  }
+const setI18nParams = useSetI18nParams()
+setI18nParams({
+  en: { pathMatch: ['my-post', 'abc'] },
+  fr: { pathMatch: ['mon-article', 'xyz'] }
 })
 </script>
 
diff --git a/specs/fixtures/switcher/pages/post/[id].vue b/specs/fixtures/switcher/pages/post/[id].vue
index 44dcf0623..f53a765bd 100644
--- a/specs/fixtures/switcher/pages/post/[id].vue
+++ b/specs/fixtures/switcher/pages/post/[id].vue
@@ -3,11 +3,10 @@ import LangSwitcher from '../../components/LangSwitcher.vue'
 
 const route = useRoute()
 
-definePageMeta({
-  nuxtI18n: {
-    en: { id: 'my-post' },
-    fr: { id: 'mon-article' }
-  }
+const setI18nParams = useSetI18nParams()
+setI18nParams({
+  en: { id: 'my-post' },
+  fr: { id: 'mon-article' }
 })
 </script>
 
diff --git a/specs/lang_switcher.spec.ts b/specs/lang_switcher.spec.ts
index 5a896de55..e5e58f941 100644
--- a/specs/lang_switcher.spec.ts
+++ b/specs/lang_switcher.spec.ts
@@ -9,8 +9,7 @@ await setup({
   // overrides
   nuxtConfig: {
     i18n: {
-      defaultLocale: 'en',
-      dynamicRouteParams: true
+      defaultLocale: 'en'
     }
   }
 })

From e8750c6d18f1211b563d750b5fcf9eab5089b767 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Wed, 29 Nov 2023 18:40:10 +0100
Subject: [PATCH 05/16] fix: add `useSetI18nParams` to auto imports

---
 src/module.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/module.ts b/src/module.ts
index be2179698..84fff3352 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -296,6 +296,7 @@ export default defineNuxtModule<NuxtI18nOptions>({
         'useLocaleHead',
         'useBrowserLocale',
         'useCookieLocale',
+        'useSetI18nParams',
         NUXT_I18N_COMPOSABLE_DEFINE_ROUTE,
         NUXT_I18N_COMPOSABLE_DEFINE_LOCALE,
         NUXT_I18N_COMPOSABLE_DEFINE_CONFIG

From 8a8980a775ddeec07b492504dcf6883e8e956b43 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Mon, 4 Dec 2023 17:28:10 +0100
Subject: [PATCH 06/16] test: fix dynamic parameters test

---
 specs/basic_usage.spec.ts                     | 20 ++++++++---
 .../basic_usage/components/LangSwitcher.vue   |  1 -
 .../basic_usage/pages/api/products-data.ts    | 35 +++++++++++++++++++
 .../basic_usage/pages/api/products.ts         | 19 ++++++++++
 .../pages/api/products/[product].ts           | 27 ++++++++++++++
 specs/fixtures/basic_usage/pages/products.vue |  5 ++-
 .../basic_usage/pages/products/[slug].vue     |  9 +++--
 7 files changed, 103 insertions(+), 13 deletions(-)
 create mode 100644 specs/fixtures/basic_usage/pages/api/products-data.ts
 create mode 100644 specs/fixtures/basic_usage/pages/api/products.ts
 create mode 100644 specs/fixtures/basic_usage/pages/api/products/[product].ts

diff --git a/specs/basic_usage.spec.ts b/specs/basic_usage.spec.ts
index 0bef65b69..1ea742216 100644
--- a/specs/basic_usage.spec.ts
+++ b/specs/basic_usage.spec.ts
@@ -1,7 +1,7 @@
 import { test, expect } from 'vitest'
 import { fileURLToPath } from 'node:url'
 import { setup, $fetch } from './utils'
-import { assetLocaleHead, getData, getText, gotoPath, renderPage, waitForURL } from './helper'
+import { assetLocaleHead, getData, getText, gotoPath, renderPage, waitForURL, getDom } from './helper'
 
 await setup({
   rootDir: fileURLToPath(new URL(`./fixtures/basic_usage`, import.meta.url)),
@@ -322,9 +322,21 @@ test('server integration extended from `layers/layer-server`', async () => {
 
 test('dynamic parameters', async () => {
   const { page } = await renderPage('/products/big-chair')
-  console.log(await page.content())
-  expect(await page.locator('#switch-nuxt-link-nl').getAttribute('href')).toEqual('/nl/products/grote-stoel')
+
+  // NOTE: Test is deceptive, does not test SSR
+  // lang switcher renders localized links as it's rendered after `setI18nParams` calls
+  expect(await page.locator('#nuxt-locale-link-nl').getAttribute('href')).toEqual('/nl/products/grote-stoel')
+  // END
 
   await gotoPath(page, '/nl/products/rode-mok')
-  expect(await page.locator('#switch-nuxt-link-en').getAttribute('href')).toEqual('/products/red-mug')
+  expect(await page.locator('#nuxt-locale-link-en').getAttribute('href')).toEqual('/products/red-mug')
+
+  // head tags - alt links are updated server side
+  const product1Html = await $fetch('/products/big-chair')
+  const product1Dom = getDom(product1Html)
+  expect(product1Dom.querySelector('#i18n-alt-nl').href).toEqual('/nl/products/grote-stoel')
+
+  const product2Html = await $fetch('/nl/products/rode-mok')
+  const product2dom = getDom(product2Html)
+  expect(product2dom.querySelector('#i18n-alt-en').href).toEqual('/products/red-mug')
 })
diff --git a/specs/fixtures/basic_usage/components/LangSwitcher.vue b/specs/fixtures/basic_usage/components/LangSwitcher.vue
index c341b3430..06c6f6b45 100644
--- a/specs/fixtures/basic_usage/components/LangSwitcher.vue
+++ b/specs/fixtures/basic_usage/components/LangSwitcher.vue
@@ -21,7 +21,6 @@ const localesExcludingCurrent = computed(() => {
         :id="`nuxt-locale-link-${locale.code}`"
         :key="index"
         :exact="true"
-        :id="`switch-nuxt-link-${locale.code}`"
         :to="switchLocalePath(locale.code)"
         >{{ locale.name }}</NuxtLink
       >
diff --git a/specs/fixtures/basic_usage/pages/api/products-data.ts b/specs/fixtures/basic_usage/pages/api/products-data.ts
new file mode 100644
index 000000000..a8c8ab0c8
--- /dev/null
+++ b/specs/fixtures/basic_usage/pages/api/products-data.ts
@@ -0,0 +1,35 @@
+export default [
+  {
+    id: 1,
+    name: {
+      en: 'Red mug',
+      nl: 'Rode mok'
+    },
+    slugs: {
+      en: 'red-mug',
+      nl: 'rode-mok'
+    }
+  },
+  {
+    id: 2,
+    name: {
+      en: 'Big chair',
+      nl: 'Grote stoel'
+    },
+    slugs: {
+      en: 'big-chair',
+      nl: 'grote-stoel'
+    }
+  },
+  {
+    id: 3,
+    name: {
+      en: 'Standing desk',
+      nl: 'Sta bureau'
+    },
+    slugs: {
+      en: 'standing-desk',
+      nl: 'sta-bureau'
+    }
+  }
+]
diff --git a/specs/fixtures/basic_usage/pages/api/products.ts b/specs/fixtures/basic_usage/pages/api/products.ts
new file mode 100644
index 000000000..3afba59b6
--- /dev/null
+++ b/specs/fixtures/basic_usage/pages/api/products.ts
@@ -0,0 +1,19 @@
+import type { LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
+import productsData from './products-data'
+/**
+ * NOTE:
+ *  locale resources is managed on backend examples
+ */
+
+const locales: LocaleMessages<DefineLocaleMessage> = {
+  'en-GB': {
+    settings: {
+      profile: 'Profile'
+    }
+  },
+  ja: {}
+}
+
+export default defineEventHandler(event => {
+  return productsData
+})
diff --git a/specs/fixtures/basic_usage/pages/api/products/[product].ts b/specs/fixtures/basic_usage/pages/api/products/[product].ts
new file mode 100644
index 000000000..e771e17d5
--- /dev/null
+++ b/specs/fixtures/basic_usage/pages/api/products/[product].ts
@@ -0,0 +1,27 @@
+import type { LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
+import productsData from '../products-data'
+
+/**
+ * NOTE:
+ *  locale resources is managed on backend examples
+ */
+
+const locales: LocaleMessages<DefineLocaleMessage> = {
+  'en-GB': {
+    settings: {
+      profile: 'Profile'
+    }
+  },
+  ja: {}
+}
+
+export default defineEventHandler(event => {
+  const slug = event.context.params?.product
+  const found = productsData.find(x => Object.values(x.slugs).includes(slug))
+
+  if (found == null) {
+    return {}
+  }
+
+  return found
+})
diff --git a/specs/fixtures/basic_usage/pages/products.vue b/specs/fixtures/basic_usage/pages/products.vue
index f4fa94c50..c0f6bfe69 100644
--- a/specs/fixtures/basic_usage/pages/products.vue
+++ b/specs/fixtures/basic_usage/pages/products.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, onMounted } from '#imports'
-import LangSwitcher from '../components/LangSwitcher.vue'
+import { ref } from '#imports'
+
 const products = ref([])
 const { locale } = useI18n()
 const localePath = useLocalePath()
@@ -12,7 +12,6 @@ onMounted(async () => {
 
 <template>
   <div>
-    <LangSwitcher />
     <NuxtLink
       class="product"
       v-for="product in products"
diff --git a/specs/fixtures/basic_usage/pages/products/[slug].vue b/specs/fixtures/basic_usage/pages/products/[slug].vue
index 391388085..2b8b1477a 100644
--- a/specs/fixtures/basic_usage/pages/products/[slug].vue
+++ b/specs/fixtures/basic_usage/pages/products/[slug].vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import { useI18n, useLocalePath, useSetI18nParams } from '#i18n'
-import { ref, computed, onMounted, useHead, useRoute } from '#imports'
-import LangSwitcher from '@/components/LangSwitcher.vue'
+import { useI18n, useSetI18nParams } from '#i18n'
+import { ref, useRoute } from '#imports'
+import LangSwitcher from '../components/LangSwitcher.vue'
+
 const product = ref()
 const { locale } = useI18n()
-const localePath = useLocalePath()
 const route = useRoute()
-const head = useHead({})
 
 const setI18nParams = useSetI18nParams({ addSeoAttributes: true })
 product.value = await $fetch(`/api/products/${route.params.slug}`)

From 18269896540c3559fa9ced2168b68b685f3b871a Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Fri, 8 Dec 2023 01:07:58 +0100
Subject: [PATCH 07/16] fix: prevent hydration mismatch by not using `useState`

---
 src/runtime/composables/index.ts | 20 +++++++++++++++-----
 src/runtime/plugins/i18n.ts      | 14 +++-----------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/runtime/composables/index.ts b/src/runtime/composables/index.ts
index 2f74135b8..4347a3413 100644
--- a/src/runtime/composables/index.ts
+++ b/src/runtime/composables/index.ts
@@ -1,8 +1,9 @@
-import { useRoute, useRouter, useRequestHeaders, useCookie, useNuxtApp, useState } from '#imports'
-import { ref } from 'vue'
+import { useRoute, useRouter, useRequestHeaders, useCookie, useNuxtApp } from '#imports'
+import { ref, computed } from 'vue'
 import { parseAcceptLanguage } from '../internal'
 import { nuxtI18nInternalOptions, nuxtI18nOptionsDefault, localeCodes as _localeCodes } from '#build/i18n.options.mjs'
 import { getActiveHead } from 'unhead'
+import { useI18n } from 'vue-i18n'
 import {
   getComposer,
   findBrowserLocale,
@@ -21,7 +22,8 @@ import type { DetectBrowserLanguageOptions } from '#build/i18n.options.mjs'
 export * from 'vue-i18n'
 export * from './shared'
 export type { LocaleObject } from 'vue-i18n-routing'
-import { type Locale, type LocaleMessages, type DefineLocaleMessage, type I18nOptions, useI18n } from 'vue-i18n'
+
+import type { Locale } from 'vue-i18n'
 import type { LocaleObject } from 'vue-i18n-routing'
 import {
   addAlternateOgLocales,
@@ -51,7 +53,15 @@ export function useSetI18nParams(
   const head = getActiveHead()
   const locale = getLocale(i18n)
   const locales = getNormalizedLocales(getLocales(i18n))
-  const metaState = useState<Record<string, unknown>>('nuxt-i18n-meta')
+  const route = useRoute()
+  const i18nParams = computed({
+    get() {
+      return route.meta.nuxtI18n ?? {}
+    },
+    set(val) {
+      route.meta.nuxtI18n = val
+    }
+  })
   const addDirAttribute = options?.addDirAttribute ?? true
   const addSeoAttributes = options?.addSeoAttributes ?? true
   const idAttribute = options?.identifierAttribute ?? 'id'
@@ -82,7 +92,7 @@ export function useSetI18nParams(
   }
 
   return function (params: Record<string, unknown>) {
-    metaState.value = { ...params }
+    i18nParams.value = { ...params }
     setMeta()
   }
 }
diff --git a/src/runtime/plugins/i18n.ts b/src/runtime/plugins/i18n.ts
index bbe96d0e0..c8ae768c6 100644
--- a/src/runtime/plugins/i18n.ts
+++ b/src/runtime/plugins/i18n.ts
@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { createI18n } from 'vue-i18n'
 import {
   createLocaleFromRouteGetter,
@@ -13,14 +13,7 @@ import {
   getLocale,
   getComposer
 } from 'vue-i18n-routing'
-import {
-  defineNuxtPlugin,
-  useRouter,
-  useRoute,
-  addRouteMiddleware,
-  defineNuxtRouteMiddleware,
-  useState
-} from '#imports'
+import { defineNuxtPlugin, useRouter, useRoute, addRouteMiddleware, defineNuxtRouteMiddleware } from '#imports'
 import {
   localeCodes,
   vueI18nConfigs,
@@ -111,8 +104,7 @@ export default defineNuxtPlugin({
       ...nuxtI18nOptions,
       dynamicRouteParamsKey: 'nuxtI18n',
       switchLocalePathIntercepter: extendSwitchLocalePathIntercepter(differentDomains, normalizedLocales, nuxtContext),
-      prefixable: extendPrefixable(differentDomains),
-      dynamicParamsInterceptor: () => useState('nuxt-i18n-meta', () => ref({}))
+      prefixable: extendPrefixable(differentDomains)
     })
 
     const getDefaultLocale = (defaultLocale: string) => defaultLocale || vueI18nOptions.locale || 'en-US'

From 039c78bcba14c46387f1d2224cd9792516dbe7db Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Fri, 8 Dec 2023 01:38:13 +0100
Subject: [PATCH 08/16] fix: add deprecation warning for `nuxtI18n` usage

---
 src/bundler.ts                    |  7 ++++
 src/module.ts                     |  6 ++++
 src/transform/meta-deprecation.ts | 59 +++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+)
 create mode 100644 src/transform/meta-deprecation.ts

diff --git a/src/bundler.ts b/src/bundler.ts
index 5b4d3a41b..104ba2f88 100644
--- a/src/bundler.ts
+++ b/src/bundler.ts
@@ -13,6 +13,7 @@ import type { PluginOptions } from '@intlify/unplugin-vue-i18n'
 import type { NuxtI18nOptions } from './types'
 import type { TransformMacroPluginOptions } from './transform/macros'
 import type { ResourcePluginOptions } from './transform/resource'
+import { MetaDeprecationPlugin, type MetaDeprecationPluginOptions } from './transform/meta-deprecation'
 
 const debug = createDebug('@nuxtjs/i18n:bundler')
 
@@ -33,6 +34,10 @@ export async function extendBundler(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOp
     sourcemap: !!nuxt.options.sourcemap.server || !!nuxt.options.sourcemap.client
   }
 
+  const metaDeprecationOptions: MetaDeprecationPluginOptions = {
+    sourcemap: !!nuxt.options.sourcemap.server || !!nuxt.options.sourcemap.client
+  }
+
   /**
    * webpack plugin
    */
@@ -59,6 +64,7 @@ export async function extendBundler(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOp
     addWebpackPlugin(VueI18nWebpackPlugin(webpackPluginOptions))
     addWebpackPlugin(TransformMacroPlugin.webpack(macroOptions))
     addWebpackPlugin(ResourcePlugin.webpack(resourceOptions))
+    addWebpackPlugin(MetaDeprecationPlugin.webpack(metaDeprecationOptions))
 
     extendWebpackConfig(config => {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- `config.plugins` is safe, so it's assigned with nuxt!
@@ -106,6 +112,7 @@ export async function extendBundler(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOp
   addVitePlugin(VueI18nVitePlugin(vitePluginOptions))
   addVitePlugin(TransformMacroPlugin.vite(macroOptions))
   addVitePlugin(ResourcePlugin.vite(resourceOptions))
+  addVitePlugin(MetaDeprecationPlugin.vite(metaDeprecationOptions))
 
   extendViteConfig(config => {
     if (config.define) {
diff --git a/src/module.ts b/src/module.ts
index 84fff3352..2d08ce5c4 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -120,6 +120,12 @@ export default defineNuxtModule<NuxtI18nOptions>({
       )
     }
 
+    if (options.dynamicRouteParams) {
+      logger.warn(
+        'The `dynamicRouteParams` options is deprecated and will be removed in `v8.1`, use `useSetI18nParameters` instead.'
+      )
+    }
+
     /**
      * nuxt layers handling ...
      */
diff --git a/src/transform/meta-deprecation.ts b/src/transform/meta-deprecation.ts
new file mode 100644
index 000000000..2103aa894
--- /dev/null
+++ b/src/transform/meta-deprecation.ts
@@ -0,0 +1,59 @@
+import createDebug from 'debug'
+import { pathToFileURL } from 'node:url'
+import { createUnplugin } from 'unplugin'
+import { parseQuery, parseURL } from 'ufo'
+import MagicString from 'magic-string'
+import { VIRTUAL_PREFIX_HEX } from './utils'
+
+export interface MetaDeprecationPluginOptions {
+  sourcemap?: boolean
+}
+
+const debug = createDebug('@nuxtjs/i18n:transform:meta-deprecation')
+
+export const MetaDeprecationPlugin = createUnplugin((options: MetaDeprecationPluginOptions) => {
+  debug('options', options)
+
+  return {
+    name: 'nuxtjs:i18n-meta-deprecation',
+    enforce: 'post',
+
+    transformInclude(id) {
+      debug('transformInclude', id)
+
+      if (!id || id.startsWith(VIRTUAL_PREFIX_HEX)) {
+        return false
+      }
+
+      const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
+      return pathname.endsWith('.vue') || !!parseQuery(search).macro
+    },
+
+    transform(code, id) {
+      debug('transform', id)
+
+      const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href))
+
+      const s = new MagicString(code)
+
+      function result() {
+        if (s.hasChanged()) {
+          return {
+            code: s.toString(),
+            map: options.sourcemap && !/\.([c|m]?ts)$/.test(pathname) ? s.generateMap({ hires: true }) : null
+          }
+        }
+      }
+
+      const match = code.match(new RegExp(`\\bdefinePageMeta\\({[.\\s]+(?=nuxtI18n)`))
+      if (match?.[0]) {
+        // prettier-ignore
+        console.warn(
+          `Setting \`nuxtI18n\` on \`definePageMeta\` is deprecated and will be removed in \`v8.1\`, use \`useSetI18nParameters\` instead.\nUsage found in ${id.split('?')[0]}`
+        )
+      }
+
+      return result()
+    }
+  }
+})

From 246ed257ca78432c5f8fe788f66b9b64b1642b25 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Fri, 8 Dec 2023 01:47:11 +0100
Subject: [PATCH 09/16] fix: revert docs and refer to composable

---
 docs/content/3.options/2.routing.md | 48 +++++++++++++++++++++++++++++
 src/module.ts                       |  2 +-
 src/transform/meta-deprecation.ts   |  2 +-
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/docs/content/3.options/2.routing.md b/docs/content/3.options/2.routing.md
index 0e68b44b8..b1523b5b8 100644
--- a/docs/content/3.options/2.routing.md
+++ b/docs/content/3.options/2.routing.md
@@ -126,3 +126,51 @@ Set to a path to which you want to redirect users accessing the root URL (`/`).
   path: 'about-us'
 }
 ```
+
+## `dynamicRouteParams`
+
+- type: `boolean`
+- default: `false`
+
+::alert{type=warning}
+The `dynamicRouteParams` is deprecated and will be removed in `v8.1`, use the [`useSetI18nParams`](/API/composables#useseti18nparams) composable instead. 
+::
+
+Whether to localize dynamic route parameters. 
+
+If `true`, you can set the dynamic route parameter to `nuxtI18n` field of `definePageMeta` for each locale:
+
+```ts {}[nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: [
+    '@nuxtjs/i18n'
+  ],
+
+  i18n: {
+    // ...
+    dynamicRouteParams: true,
+    // ...
+  },
+
+  // ...
+})
+```
+
+```vue
+<script setup>
+definePageMeta({
+  // ...
+  nuxtI18n: {
+    en: { id: 'my-post' },
+    fr: { id: 'mon-article' }
+  }
+  // ...
+})
+</script>
+
+<template>
+  <!-- pages/post/[id].vue -->
+</template>
+```
+
+See more information in [Dynamic route parameters](/guide/lang-switcher#dynamic-route-parameters)
diff --git a/src/module.ts b/src/module.ts
index 2d08ce5c4..72545f2c7 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -122,7 +122,7 @@ export default defineNuxtModule<NuxtI18nOptions>({
 
     if (options.dynamicRouteParams) {
       logger.warn(
-        'The `dynamicRouteParams` options is deprecated and will be removed in `v8.1`, use `useSetI18nParameters` instead.'
+        'The `dynamicRouteParams` options is deprecated and will be removed in `v8.1`, use the `useSetI18nParams` composable instead.'
       )
     }
 
diff --git a/src/transform/meta-deprecation.ts b/src/transform/meta-deprecation.ts
index 2103aa894..976907a73 100644
--- a/src/transform/meta-deprecation.ts
+++ b/src/transform/meta-deprecation.ts
@@ -49,7 +49,7 @@ export const MetaDeprecationPlugin = createUnplugin((options: MetaDeprecationPlu
       if (match?.[0]) {
         // prettier-ignore
         console.warn(
-          `Setting \`nuxtI18n\` on \`definePageMeta\` is deprecated and will be removed in \`v8.1\`, use \`useSetI18nParameters\` instead.\nUsage found in ${id.split('?')[0]}`
+          `Setting \`nuxtI18n\` on \`definePageMeta\` is deprecated and will be removed in \`v8.1\`, use the \`useSetI18nParams\` composable instead.\nUsage found in ${id.split('?')[0]}`
         )
       }
 

From b9964e2bd1e3087d6c7606d2a3c7bbc97caa9e27 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Fri, 8 Dec 2023 09:56:09 +0100
Subject: [PATCH 10/16] docs: improve `useSetI18nParams` documentation

---
 docs/content/2.guide/9.lang-switcher.md | 56 +++++++++++++++++++++++--
 docs/content/3.options/2.routing.md     |  2 +-
 docs/content/4.API/1.composables.md     | 18 ++++++--
 3 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/docs/content/2.guide/9.lang-switcher.md b/docs/content/2.guide/9.lang-switcher.md
index 7477dd960..1c0ac2371 100644
--- a/docs/content/2.guide/9.lang-switcher.md
+++ b/docs/content/2.guide/9.lang-switcher.md
@@ -84,10 +84,11 @@ Dealing with dynamic route parameters requires a bit more work because you need
 
 ::alert{type="warning"}
 During SSR it matters when and where you set i18n parameters, since there is no reactivity during SSR.
+
 :br :br
-For example projects with a lang switcher (with `switchLocalePath`) in the layout and fetching data in a page, setting i18n parameters in the page will result in a hydration mismatch. As the layout and its components have already been rendered and do not update reactively by changes introduced by pages and components further down the tree.
-:br :br
+Components which have already been rendered do not update by changes introduced by pages and components further down the tree. Instead, these links are updated on the client side, so this should not cause any issues.
 
+:br :br
 This is not the case for SEO tags, these are updated correctly during SSR regardless of when and where i18n parameters are set.
 ::
 
@@ -104,7 +105,7 @@ setI18nParams({
 
 const switchLocalePath = useSwitchLocalePath()
 switchLocalePath('en') // /products/red-mug
-switchLocalePath('nl') // /products/rode-mok
+switchLocalePath('nl') // /nl/products/rode-mok
 </script>
 
 <template>
@@ -239,3 +240,52 @@ route.meta.pageTransition.onBeforeEnter = async () => {
 }
 </style>
 ```
+
+
+## Dynamic route parameters using `definePageMeta` (Deprecated)
+::alert{type="warning"}
+Dynamic route params using `nuxtI18n` on `definePageMeta` has been deprecated and will be removed in `v8.1`, use the composable [`useSetI18nParams`](/api/composables#useseti18nparams) instead.
+::
+
+
+Dynamic params can be configured uding `definePageMeta`. These will be merged with route params when generating lang switch routes with `switchLocalePath()`.
+
+::alert{type="warning"}
+You have to set the `dynamicRouteParams` option to `true` in **Nuxt i18n module**'s options to enable dynamic route parameters.
+::
+
+An example (replace `id` with the applicable route parameter):
+
+```vue
+<script setup>
+definePageMeta({
+  // ...
+  nuxtI18n: {
+    en: { id: 'my-post' },
+    fr: { id: 'mon-article' }
+  }
+  // ...
+})
+</script>
+<template>
+  <!-- pages/post/[id].vue -->
+</template>
+```
+
+Note that for the special case of a catch-all route named like `[...pathMatch.vue]`, the key of the object needs to say `pathMatch`. For example:
+
+```vue
+<script>
+definePageMeta({
+  // ...
+  nuxtI18n: {
+    en: { pathMatch: ['not-found-my-post'] },
+    fr: { pathMatch: ['not-found-mon-article'] }
+  }
+  // ...
+})
+</script>
+<template>
+  <!-- pages/[...pathMatch].vue -->
+</template>
+```
\ No newline at end of file
diff --git a/docs/content/3.options/2.routing.md b/docs/content/3.options/2.routing.md
index b1523b5b8..5fdfe1402 100644
--- a/docs/content/3.options/2.routing.md
+++ b/docs/content/3.options/2.routing.md
@@ -133,7 +133,7 @@ Set to a path to which you want to redirect users accessing the root URL (`/`).
 - default: `false`
 
 ::alert{type=warning}
-The `dynamicRouteParams` is deprecated and will be removed in `v8.1`, use the [`useSetI18nParams`](/API/composables#useseti18nparams) composable instead. 
+The `dynamicRouteParams` is deprecated and will be removed in `v8.1`, use the [`useSetI18nParams`](/api/composables#useseti18nparams) composable instead. 
 ::
 
 Whether to localize dynamic route parameters. 
diff --git a/docs/content/4.API/1.composables.md b/docs/content/4.API/1.composables.md
index bb2d3a882..791afc13a 100644
--- a/docs/content/4.API/1.composables.md
+++ b/docs/content/4.API/1.composables.md
@@ -127,7 +127,7 @@ An object accepting the following optional fields:
 
 ## `useSetI18nParams`
 
-The `useSetI18nParams` returns a function to set translated parameters for the current route.
+The `useSetI18nParams` returns a function to set translated parameters for the current route. For more details on its usage see the [Lang Switcher guide](/guide/lang-switcher#dynamic-route-parameters).
 
 ### Type
 
@@ -135,15 +135,25 @@ The `useSetI18nParams` returns a function to set translated parameters for the c
 declare function useSetI18nParams(): (locale: Record<Locale, unknown>) => void;
 ```
 
-An example, locale loading with fetch:
+Example:
 ```vue
 <script setup>
+// fetch product from API... (red mug)
+
 const setI18nParams = useSetI18nParams();
 setI18nParams({
-  en: { slug: 'red-mug' },
-  nl: { slug: 'rode-mok' }
+  en: { slug: data.slugs.en }, // slug: 'red-mug' 
+  nl: { slug: data.slugs.nl }  // slug: 'rode-mok'
 })
+
+const switchLocalePath = useSwitchLocalePath()
+switchLocalePath('en') // /products/red-mug
+switchLocalePath('nl') // /nl/products/rode-mok
 </script>
+
+<template>
+  <!-- pages/products/[slug].vue -->
+</template>
 ```
 
 

From 908843242bda068c505f2ca613da5fedc37f2c35 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Fri, 8 Dec 2023 09:57:12 +0100
Subject: [PATCH 11/16] test: improve `useSetI18nParams` test

---
 specs/basic_usage.spec.ts                            | 3 ---
 specs/fixtures/basic_usage/pages/products.vue        | 2 ++
 specs/fixtures/basic_usage/pages/products/[slug].vue | 2 --
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/specs/basic_usage.spec.ts b/specs/basic_usage.spec.ts
index 1ea742216..08d300f19 100644
--- a/specs/basic_usage.spec.ts
+++ b/specs/basic_usage.spec.ts
@@ -323,10 +323,7 @@ test('server integration extended from `layers/layer-server`', async () => {
 test('dynamic parameters', async () => {
   const { page } = await renderPage('/products/big-chair')
 
-  // NOTE: Test is deceptive, does not test SSR
-  // lang switcher renders localized links as it's rendered after `setI18nParams` calls
   expect(await page.locator('#nuxt-locale-link-nl').getAttribute('href')).toEqual('/nl/products/grote-stoel')
-  // END
 
   await gotoPath(page, '/nl/products/rode-mok')
   expect(await page.locator('#nuxt-locale-link-en').getAttribute('href')).toEqual('/products/red-mug')
diff --git a/specs/fixtures/basic_usage/pages/products.vue b/specs/fixtures/basic_usage/pages/products.vue
index c0f6bfe69..2e7c6a1db 100644
--- a/specs/fixtures/basic_usage/pages/products.vue
+++ b/specs/fixtures/basic_usage/pages/products.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref } from '#imports'
+import LangSwitcher from '../components/LangSwitcher.vue'
 
 const products = ref([])
 const { locale } = useI18n()
@@ -12,6 +13,7 @@ onMounted(async () => {
 
 <template>
   <div>
+    <LangSwitcher />
     <NuxtLink
       class="product"
       v-for="product in products"
diff --git a/specs/fixtures/basic_usage/pages/products/[slug].vue b/specs/fixtures/basic_usage/pages/products/[slug].vue
index 2b8b1477a..f03df90c2 100644
--- a/specs/fixtures/basic_usage/pages/products/[slug].vue
+++ b/specs/fixtures/basic_usage/pages/products/[slug].vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useI18n, useSetI18nParams } from '#i18n'
 import { ref, useRoute } from '#imports'
-import LangSwitcher from '../components/LangSwitcher.vue'
 
 const product = ref()
 const { locale } = useI18n()
@@ -24,7 +23,6 @@ if (product.value != null) {
 <template>
   <div>
     <section class="product">{{ product?.name?.[locale] }}</section>
-    <LangSwitcher />
   </div>
 </template>
 

From 508446df3eb10b8025ec830e9a6b500505f0eae5 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Fri, 8 Dec 2023 09:57:27 +0100
Subject: [PATCH 12/16] chore: cleanup playground

---
 playground/pages/index.vue           |  5 ++---
 playground/pages/products.vue        | 11 -----------
 playground/pages/products/[slug].vue | 12 ++++++++----
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index accf9d39a..3c05046f2 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -79,9 +79,8 @@ definePageMeta({
       <NuxtLink :to="localePath({ name: 'server' })">Server</NuxtLink> |
       <NuxtLink :to="localePath({ name: 'category-id', params: { id: 'foo' } })">Category</NuxtLink> |
       <NuxtLinkLocale :to="{ name: 'history' }" class="history-link">History</NuxtLinkLocale> |
-      <NuxtLinkLocale :to="'/'" locale="ja" activeClass="link-active">Home (Japanese)</NuxtLinkLocale>
-      <nuxt-link to=""></nuxt-link>
-      <NuxtLinkLocale to=""></NuxtLinkLocale>
+      <NuxtLinkLocale :to="'/'" locale="ja" activeClass="link-active">Home (Japanese)</NuxtLinkLocale> |
+      <NuxtLinkLocale :to="{ name: 'products' }" class="products-link">Products</NuxtLinkLocale>
     </nav>
     <h2>Current Language: {{ getLocaleName(locale) }}</h2>
     <h2>Current Strategy: {{ strategy }}</h2>
diff --git a/playground/pages/products.vue b/playground/pages/products.vue
index a927dcd11..5a141a856 100644
--- a/playground/pages/products.vue
+++ b/playground/pages/products.vue
@@ -4,16 +4,6 @@ const localePath = useLocalePath()
 const switchLocalePath = useSwitchLocalePath()
 
 const { data } = await useAsyncData('products', () => $fetch(`/api/products`))
-definePageMeta({
-  pageTransition: {
-    name: 'page',
-    mode: 'out-in',
-    onBeforeEnter: async () => {
-      const { finalizePendingLocaleChange } = useNuxtApp().$i18n
-      await finalizePendingLocaleChange()
-    }
-  }
-})
 </script>
 
 <template>
@@ -23,7 +13,6 @@ definePageMeta({
         <NuxtLink :to="switchLocalePath(locale.code) || ''">{{ locale.name }}</NuxtLink> |
       </span>
     </nav>
-    {{ locale }}
     <NuxtLink
       class="product"
       v-for="product in data"
diff --git a/playground/pages/products/[slug].vue b/playground/pages/products/[slug].vue
index 874730d4f..da4b7f39c 100644
--- a/playground/pages/products/[slug].vue
+++ b/playground/pages/products/[slug].vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { useI18n, useLocalePath, useSetI18nParams, useSwitchLocalePath } from '#i18n'
-import { ref, computed, onMounted, useHead, useRoute } from '#imports'
-// import LangSwitcher from '@/components/LangSwitcher.vue'
-const product = ref()
+import { useI18n, useSetI18nParams } from '#i18n'
+import { useRoute } from '#imports'
+const switchLocalePath = useSwitchLocalePath()
 const { locale, locales } = useI18n()
 const route = useRoute()
 
@@ -26,6 +25,11 @@ if (data.value != null) {
 <template>
   <div>
     <section class="product">{{ pending ? 'loading' : data?.name?.[locale] }}</section>
+    <nav style="padding: 1em">
+      <span v-for="locale in locales" :key="locale.code">
+        <NuxtLink :to="switchLocalePath(locale.code) || ''">{{ locale.name }}</NuxtLink> |
+      </span>
+    </nav>
   </div>
 </template>
 

From b6da1955805f9e977ed72b396cd2c3894e37b9ac Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Fri, 8 Dec 2023 10:23:59 +0100
Subject: [PATCH 13/16] fix: invert `useSetI18nParams` defaults

---
 docs/content/4.API/1.composables.md           | 30 +++++++++++++++----
 playground/layouts/default.vue                |  2 +-
 playground/pages/products/[slug].vue          |  2 +-
 .../basic_usage/pages/products/[slug].vue     |  2 +-
 .../switcher/pages/[...pathMatch].vue         |  2 +-
 specs/fixtures/switcher/pages/post/[id].vue   |  2 +-
 src/runtime/composables/index.ts              | 25 ++++++++--------
 7 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/docs/content/4.API/1.composables.md b/docs/content/4.API/1.composables.md
index 791afc13a..1b50273b7 100644
--- a/docs/content/4.API/1.composables.md
+++ b/docs/content/4.API/1.composables.md
@@ -129,12 +129,6 @@ An object accepting the following optional fields:
 
 The `useSetI18nParams` returns a function to set translated parameters for the current route. For more details on its usage see the [Lang Switcher guide](/guide/lang-switcher#dynamic-route-parameters).
 
-### Type
-
-```ts
-declare function useSetI18nParams(): (locale: Record<Locale, unknown>) => void;
-```
-
 Example:
 ```vue
 <script setup>
@@ -156,6 +150,30 @@ switchLocalePath('nl') // /nl/products/rode-mok
 </template>
 ```
 
+### Type
+
+```ts
+declare function useSetI18nParams(options: I18nHeadOptions): (locale: Record<Locale, unknown>) => void;
+```
+
+### Parameters
+
+#### `options`
+
+An object accepting the following optional fields:
+
+- `addDirAttribute`
+
+  **Type**: `Boolean`
+
+  Adds a `dir` attribute to the HTML element. default `false`.
+
+- `addSeoAttributes`
+
+  **Type**: `boolean | SeoAttributesOptions`
+
+  Adds various SEO attributes. default `false`.
+
 
 ## `useRouteBaseName`
 
diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
index 579561bd1..5347fe636 100644
--- a/playground/layouts/default.vue
+++ b/playground/layouts/default.vue
@@ -4,7 +4,7 @@ import { useHead } from '#imports'
 
 const route = useRoute()
 const { t } = useI18n()
-const head = useLocaleHead({ addSeoAttributes: true })
+const head = useLocaleHead({ addDirAttribute: true, addSeoAttributes: true })
 const title = computed(() => t('layouts.title', { title: t(route.meta.title ?? 'TBD') }))
 </script>
 
diff --git a/playground/pages/products/[slug].vue b/playground/pages/products/[slug].vue
index da4b7f39c..b10e77e88 100644
--- a/playground/pages/products/[slug].vue
+++ b/playground/pages/products/[slug].vue
@@ -5,7 +5,7 @@ const switchLocalePath = useSwitchLocalePath()
 const { locale, locales } = useI18n()
 const route = useRoute()
 
-const setI18nParams = useSetI18nParams()
+const setI18nParams = useSetI18nParams({ addDirAttribute: true, addSeoAttributes: true })
 const { data, pending } = await useAsyncData(`products-${route.params.slug}`, () =>
   $fetch(`/api/products/${route.params.slug}`)
 )
diff --git a/specs/fixtures/basic_usage/pages/products/[slug].vue b/specs/fixtures/basic_usage/pages/products/[slug].vue
index f03df90c2..7f1bb4a93 100644
--- a/specs/fixtures/basic_usage/pages/products/[slug].vue
+++ b/specs/fixtures/basic_usage/pages/products/[slug].vue
@@ -6,7 +6,7 @@ const product = ref()
 const { locale } = useI18n()
 const route = useRoute()
 
-const setI18nParams = useSetI18nParams({ addSeoAttributes: true })
+const setI18nParams = useSetI18nParams({ addDirAttribute: true, addSeoAttributes: true })
 product.value = await $fetch(`/api/products/${route.params.slug}`)
 if (product.value != null) {
   const availableLocales = Object.keys(product.value.slugs)
diff --git a/specs/fixtures/switcher/pages/[...pathMatch].vue b/specs/fixtures/switcher/pages/[...pathMatch].vue
index d7495135d..bd3e9d2ff 100644
--- a/specs/fixtures/switcher/pages/[...pathMatch].vue
+++ b/specs/fixtures/switcher/pages/[...pathMatch].vue
@@ -3,7 +3,7 @@ import LangSwitcher from '../components/LangSwitcher.vue'
 
 const route = useRoute()
 
-const setI18nParams = useSetI18nParams()
+const setI18nParams = useSetI18nParams({ addDirAttribute: true, addSeoAttributes: true })
 setI18nParams({
   en: { pathMatch: ['my-post', 'abc'] },
   fr: { pathMatch: ['mon-article', 'xyz'] }
diff --git a/specs/fixtures/switcher/pages/post/[id].vue b/specs/fixtures/switcher/pages/post/[id].vue
index f53a765bd..38f7daf6b 100644
--- a/specs/fixtures/switcher/pages/post/[id].vue
+++ b/specs/fixtures/switcher/pages/post/[id].vue
@@ -3,7 +3,7 @@ import LangSwitcher from '../../components/LangSwitcher.vue'
 
 const route = useRoute()
 
-const setI18nParams = useSetI18nParams()
+const setI18nParams = useSetI18nParams({ addDirAttribute: true, addSeoAttributes: true })
 setI18nParams({
   en: { id: 'my-post' },
   fr: { id: 'mon-article' }
diff --git a/src/runtime/composables/index.ts b/src/runtime/composables/index.ts
index 4347a3413..03755ad40 100644
--- a/src/runtime/composables/index.ts
+++ b/src/runtime/composables/index.ts
@@ -44,16 +44,15 @@ import {
  * @public
  */
 export function useSetI18nParams(
-  options?: Pick<
-    NonNullable<Parameters<typeof _useLocaleHead>[0]>,
-    'addDirAttribute' | 'addSeoAttributes' | 'identifierAttribute' | 'route' | 'router' | 'i18n'
-  >
+  options?: Pick<NonNullable<Parameters<typeof _useLocaleHead>[0]>, 'addDirAttribute' | 'addSeoAttributes'>
 ) {
-  const i18n = useI18n()
+  const route = useRoute()
   const head = getActiveHead()
+
+  const i18n = useI18n()
   const locale = getLocale(i18n)
   const locales = getNormalizedLocales(getLocales(i18n))
-  const route = useRoute()
+
   const i18nParams = computed({
     get() {
       return route.meta.nuxtI18n ?? {}
@@ -62,9 +61,9 @@ export function useSetI18nParams(
       route.meta.nuxtI18n = val
     }
   })
-  const addDirAttribute = options?.addDirAttribute ?? true
-  const addSeoAttributes = options?.addSeoAttributes ?? true
-  const idAttribute = options?.identifierAttribute ?? 'id'
+
+  const addDirAttribute = options?.addDirAttribute ?? false
+  const addSeoAttributes = options?.addSeoAttributes ?? false
 
   const currentLocale = getNormalizedLocales(locales).find(l => l.code === locale) || { code: locale }
   const currentLocaleIso = currentLocale.iso
@@ -82,10 +81,10 @@ export function useSetI18nParams(
 
     // Adding SEO Meta
     if (addSeoAttributes && locale && i18n.locales) {
-      addHreflangLinks(locales as LocaleObject[], metaObject, idAttribute)
-      addCanonicalLinksAndOgUrl(metaObject, idAttribute, addSeoAttributes)
-      addCurrentOgLocale(currentLocale, currentLocaleIso, metaObject, idAttribute)
-      addAlternateOgLocales(locales as LocaleObject[], currentLocaleIso, metaObject, idAttribute)
+      addHreflangLinks(locales as LocaleObject[], metaObject, 'id')
+      addCanonicalLinksAndOgUrl(metaObject, 'id', addSeoAttributes)
+      addCurrentOgLocale(currentLocale, currentLocaleIso, metaObject, 'id')
+      addAlternateOgLocales(locales as LocaleObject[], currentLocaleIso, metaObject, 'id')
     }
 
     head?.push(metaObject)

From 3511275cdd4b0abe356ec876b318ba1c6c506792 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Sat, 9 Dec 2023 15:09:21 +0100
Subject: [PATCH 14/16] fix: playground products page not changing locale

---
 playground/pages/products.vue        | 11 +++++++++++
 playground/pages/products/[slug].vue |  8 +-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/playground/pages/products.vue b/playground/pages/products.vue
index 5a141a856..a1d66a8d1 100644
--- a/playground/pages/products.vue
+++ b/playground/pages/products.vue
@@ -4,6 +4,17 @@ const localePath = useLocalePath()
 const switchLocalePath = useSwitchLocalePath()
 
 const { data } = await useAsyncData('products', () => $fetch(`/api/products`))
+definePageMeta({
+  pageTransition: {
+    name: 'page',
+    duration: 0,
+    mode: 'default',
+    onBeforeEnter: async () => {
+      const { finalizePendingLocaleChange } = useNuxtApp().$i18n
+      await finalizePendingLocaleChange()
+    }
+  }
+})
 </script>
 
 <template>
diff --git a/playground/pages/products/[slug].vue b/playground/pages/products/[slug].vue
index b10e77e88..9c291efa9 100644
--- a/playground/pages/products/[slug].vue
+++ b/playground/pages/products/[slug].vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { useI18n, useSetI18nParams } from '#i18n'
 import { useRoute } from '#imports'
-const switchLocalePath = useSwitchLocalePath()
-const { locale, locales } = useI18n()
+const { locale } = useI18n()
 const route = useRoute()
 
 const setI18nParams = useSetI18nParams({ addDirAttribute: true, addSeoAttributes: true })
@@ -25,11 +24,6 @@ if (data.value != null) {
 <template>
   <div>
     <section class="product">{{ pending ? 'loading' : data?.name?.[locale] }}</section>
-    <nav style="padding: 1em">
-      <span v-for="locale in locales" :key="locale.code">
-        <NuxtLink :to="switchLocalePath(locale.code) || ''">{{ locale.name }}</NuxtLink> |
-      </span>
-    </nav>
   </div>
 </template>
 

From 65e95d556c75f8479dfd41cc518f85991ca1b123 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Sat, 9 Dec 2023 17:28:09 +0100
Subject: [PATCH 15/16] fix: use `useLogger` for meta deprecation bundler
 plugin

---
 src/transform/meta-deprecation.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/transform/meta-deprecation.ts b/src/transform/meta-deprecation.ts
index 976907a73..fcffcf9e0 100644
--- a/src/transform/meta-deprecation.ts
+++ b/src/transform/meta-deprecation.ts
@@ -2,8 +2,11 @@ import createDebug from 'debug'
 import { pathToFileURL } from 'node:url'
 import { createUnplugin } from 'unplugin'
 import { parseQuery, parseURL } from 'ufo'
+import { useLogger } from '@nuxt/kit'
 import MagicString from 'magic-string'
+
 import { VIRTUAL_PREFIX_HEX } from './utils'
+import { NUXT_I18N_MODULE_ID } from '../constants'
 
 export interface MetaDeprecationPluginOptions {
   sourcemap?: boolean
@@ -12,6 +15,8 @@ export interface MetaDeprecationPluginOptions {
 const debug = createDebug('@nuxtjs/i18n:transform:meta-deprecation')
 
 export const MetaDeprecationPlugin = createUnplugin((options: MetaDeprecationPluginOptions) => {
+  const logger = useLogger(NUXT_I18N_MODULE_ID)
+
   debug('options', options)
 
   return {
@@ -48,7 +53,7 @@ export const MetaDeprecationPlugin = createUnplugin((options: MetaDeprecationPlu
       const match = code.match(new RegExp(`\\bdefinePageMeta\\({[.\\s]+(?=nuxtI18n)`))
       if (match?.[0]) {
         // prettier-ignore
-        console.warn(
+        logger.warn(
           `Setting \`nuxtI18n\` on \`definePageMeta\` is deprecated and will be removed in \`v8.1\`, use the \`useSetI18nParams\` composable instead.\nUsage found in ${id.split('?')[0]}`
         )
       }

From e0bf9b3e61990551163873ba8955768a4874667b Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Sat, 9 Dec 2023 17:33:22 +0100
Subject: [PATCH 16/16] fix: change `useSetI18nParams` parameters

---
 docs/content/4.API/1.composables.md           | 19 +++++----------
 playground/layouts/default.vue                |  4 ++--
 playground/pages/products/[slug].vue          |  2 +-
 .../basic_usage/pages/products/[slug].vue     |  2 +-
 .../switcher/pages/[...pathMatch].vue         |  2 +-
 specs/fixtures/switcher/pages/post/[id].vue   |  2 +-
 src/runtime/composables/index.ts              | 23 ++++++-------------
 src/runtime/utils.ts                          |  7 +++---
 8 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/docs/content/4.API/1.composables.md b/docs/content/4.API/1.composables.md
index 1b50273b7..509299262 100644
--- a/docs/content/4.API/1.composables.md
+++ b/docs/content/4.API/1.composables.md
@@ -134,7 +134,9 @@ Example:
 <script setup>
 // fetch product from API... (red mug)
 
-const setI18nParams = useSetI18nParams();
+const setI18nParams = useSetI18nParams({
+  canonicalQueries: ['foo']
+});
 setI18nParams({
   en: { slug: data.slugs.en }, // slug: 'red-mug' 
   nl: { slug: data.slugs.nl }  // slug: 'rode-mok'
@@ -153,26 +155,17 @@ switchLocalePath('nl') // /nl/products/rode-mok
 ### Type
 
 ```ts
-declare function useSetI18nParams(options: I18nHeadOptions): (locale: Record<Locale, unknown>) => void;
+declare function useSetI18nParams(options?: SeoAttributesOptions): (locale: Record<Locale, unknown>) => void;
 ```
 
 ### Parameters
 
 #### `options`
 
-An object accepting the following optional fields:
-
-- `addDirAttribute`
+  **Type**: `SeoAttributesOptions | undefined`
 
-  **Type**: `Boolean`
-
-  Adds a `dir` attribute to the HTML element. default `false`.
+  An `SeoAttributesOptions` object, default `undefined`. See the [SEO guide](/guide/seo#feature-details) for more details.
 
-- `addSeoAttributes`
-
-  **Type**: `boolean | SeoAttributesOptions`
-
-  Adds various SEO attributes. default `false`.
 
 
 ## `useRouteBaseName`
diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
index 5347fe636..aa9d56eca 100644
--- a/playground/layouts/default.vue
+++ b/playground/layouts/default.vue
@@ -10,8 +10,8 @@ const title = computed(() => t('layouts.title', { title: t(route.meta.title ?? '
 
 <template>
   <div>
-    <Html>
-      <Head :lang="head.htmlAttrs.lang">
+    <Html :lang="head.htmlAttrs.lang">
+      <Head>
         <Title>{{ title }}</Title>
         <template v-for="link in head.link" :key="link.hid">
           <Link :id="link.hid" :rel="link.rel" :href="link.href" :hreflang="link.hreflang" />
diff --git a/playground/pages/products/[slug].vue b/playground/pages/products/[slug].vue
index 9c291efa9..f89dde4c9 100644
--- a/playground/pages/products/[slug].vue
+++ b/playground/pages/products/[slug].vue
@@ -4,7 +4,7 @@ import { useRoute } from '#imports'
 const { locale } = useI18n()
 const route = useRoute()
 
-const setI18nParams = useSetI18nParams({ addDirAttribute: true, addSeoAttributes: true })
+const setI18nParams = useSetI18nParams()
 const { data, pending } = await useAsyncData(`products-${route.params.slug}`, () =>
   $fetch(`/api/products/${route.params.slug}`)
 )
diff --git a/specs/fixtures/basic_usage/pages/products/[slug].vue b/specs/fixtures/basic_usage/pages/products/[slug].vue
index 7f1bb4a93..01841a4b1 100644
--- a/specs/fixtures/basic_usage/pages/products/[slug].vue
+++ b/specs/fixtures/basic_usage/pages/products/[slug].vue
@@ -6,7 +6,7 @@ const product = ref()
 const { locale } = useI18n()
 const route = useRoute()
 
-const setI18nParams = useSetI18nParams({ addDirAttribute: true, addSeoAttributes: true })
+const setI18nParams = useSetI18nParams()
 product.value = await $fetch(`/api/products/${route.params.slug}`)
 if (product.value != null) {
   const availableLocales = Object.keys(product.value.slugs)
diff --git a/specs/fixtures/switcher/pages/[...pathMatch].vue b/specs/fixtures/switcher/pages/[...pathMatch].vue
index bd3e9d2ff..d7495135d 100644
--- a/specs/fixtures/switcher/pages/[...pathMatch].vue
+++ b/specs/fixtures/switcher/pages/[...pathMatch].vue
@@ -3,7 +3,7 @@ import LangSwitcher from '../components/LangSwitcher.vue'
 
 const route = useRoute()
 
-const setI18nParams = useSetI18nParams({ addDirAttribute: true, addSeoAttributes: true })
+const setI18nParams = useSetI18nParams()
 setI18nParams({
   en: { pathMatch: ['my-post', 'abc'] },
   fr: { pathMatch: ['mon-article', 'xyz'] }
diff --git a/specs/fixtures/switcher/pages/post/[id].vue b/specs/fixtures/switcher/pages/post/[id].vue
index 38f7daf6b..f53a765bd 100644
--- a/specs/fixtures/switcher/pages/post/[id].vue
+++ b/specs/fixtures/switcher/pages/post/[id].vue
@@ -3,7 +3,7 @@ import LangSwitcher from '../../components/LangSwitcher.vue'
 
 const route = useRoute()
 
-const setI18nParams = useSetI18nParams({ addDirAttribute: true, addSeoAttributes: true })
+const setI18nParams = useSetI18nParams()
 setI18nParams({
   en: { id: 'my-post' },
   fr: { id: 'mon-article' }
diff --git a/src/runtime/composables/index.ts b/src/runtime/composables/index.ts
index 03755ad40..35f97c8bb 100644
--- a/src/runtime/composables/index.ts
+++ b/src/runtime/composables/index.ts
@@ -24,7 +24,7 @@ export * from './shared'
 export type { LocaleObject } from 'vue-i18n-routing'
 
 import type { Locale } from 'vue-i18n'
-import type { LocaleObject } from 'vue-i18n-routing'
+import type { LocaleObject, SeoAttributesOptions } from 'vue-i18n-routing'
 import {
   addAlternateOgLocales,
   addCanonicalLinksAndOgUrl,
@@ -37,15 +37,14 @@ import {
 /**
  * Returns a function to set i18n params.
  *
- * @param options - An options, see about details {@link I18nHeadOptions}.
+ * @param options - An options object, see {@link SeoAttributesOptions}.
  *
- * @returns setI18nParams {@link I18nHeadMetaInfo | head properties}.
+ * @returns a {@link SetI18nParamsFunction}.
  *
  * @public
  */
-export function useSetI18nParams(
-  options?: Pick<NonNullable<Parameters<typeof _useLocaleHead>[0]>, 'addDirAttribute' | 'addSeoAttributes'>
-) {
+export type SetI18nParamsFunction = (params: Record<string, unknown>) => void
+export function useSetI18nParams(seoAttributes?: SeoAttributesOptions): SetI18nParamsFunction {
   const route = useRoute()
   const head = getActiveHead()
 
@@ -62,27 +61,19 @@ export function useSetI18nParams(
     }
   })
 
-  const addDirAttribute = options?.addDirAttribute ?? false
-  const addSeoAttributes = options?.addSeoAttributes ?? false
-
   const currentLocale = getNormalizedLocales(locales).find(l => l.code === locale) || { code: locale }
   const currentLocaleIso = currentLocale.iso
-  const currentLocaleDir = currentLocale.dir || i18n.defaultDirection
 
   const setMeta = () => {
     const metaObject: HeadParam = {
-      htmlAttrs: {
-        dir: addDirAttribute ? currentLocaleDir : undefined,
-        lang: addSeoAttributes && locale && i18n.locales ? currentLocaleIso : undefined
-      },
       link: [],
       meta: []
     }
 
     // Adding SEO Meta
-    if (addSeoAttributes && locale && i18n.locales) {
+    if (locale && i18n.locales) {
       addHreflangLinks(locales as LocaleObject[], metaObject, 'id')
-      addCanonicalLinksAndOgUrl(metaObject, 'id', addSeoAttributes)
+      addCanonicalLinksAndOgUrl(metaObject, 'id', seoAttributes)
       addCurrentOgLocale(currentLocale, currentLocaleIso, metaObject, 'id')
       addAlternateOgLocales(locales as LocaleObject[], currentLocaleIso, metaObject, 'id')
     }
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
index a3a510819..1195621ae 100644
--- a/src/runtime/utils.ts
+++ b/src/runtime/utils.ts
@@ -43,7 +43,8 @@ import type {
   BaseUrlResolveHandler,
   PrefixableOptions,
   SwitchLocalePathIntercepter,
-  I18nHeadOptions
+  I18nHeadOptions,
+  SeoAttributesOptions
 } from 'vue-i18n-routing'
 import type { I18n, I18nOptions, Locale, FallbackLocale, LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
 import type { NuxtApp } from '#app'
@@ -497,7 +498,7 @@ export function extendBaseUrl<Context extends NuxtApp = NuxtApp>(
 
 /* eslint-enable @typescript-eslint/no-explicit-any */
 
-export type HeadParam = Required<Pick<HeadSafe, 'htmlAttrs' | 'meta' | 'link'>>
+export type HeadParam = Required<Pick<HeadSafe, 'meta' | 'link'>>
 type IdParam = NonNullable<I18nHeadOptions['identifierAttribute']>
 
 export function addHreflangLinks(locales: LocaleObject[], head: HeadParam, idAttribute: IdParam) {
@@ -556,7 +557,7 @@ export function addHreflangLinks(locales: LocaleObject[], head: HeadParam, idAtt
 export function addCanonicalLinksAndOgUrl(
   head: HeadParam,
   idAttribute: IdParam,
-  seoAttributesOptions: I18nHeadOptions['addSeoAttributes']
+  seoAttributesOptions: SeoAttributesOptions = {}
 ) {
   const { baseUrl } = useI18n()
   const route = useRoute()