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..1c0ac2371 100644
--- a/docs/content/2.guide/9.lang-switcher.md
+++ b/docs/content/2.guide/9.lang-switcher.md
@@ -80,57 +80,57 @@ 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.
 
-You have to set the `dynamicRouteParams` option to `true` in **Nuxt i18n module**'s options to enable dynamic route parameters.
+: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.
 ::
 
-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') // /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.
 ::
@@ -240,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 8c6b66afd..5fdfe1402 100644
--- a/docs/content/3.options/2.routing.md
+++ b/docs/content/3.options/2.routing.md
@@ -132,6 +132,10 @@ Set to a path to which you want to redirect users accessing the root URL (`/`).
 - 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:
diff --git a/docs/content/4.API/1.composables.md b/docs/content/4.API/1.composables.md
index 12f85d3c0..509299262 100644
--- a/docs/content/4.API/1.composables.md
+++ b/docs/content/4.API/1.composables.md
@@ -124,6 +124,50 @@ 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. For more details on its usage see the [Lang Switcher guide](/guide/lang-switcher#dynamic-route-parameters).
+
+Example:
+```vue
+<script setup>
+// fetch product from API... (red mug)
+
+const setI18nParams = useSetI18nParams({
+  canonicalQueries: ['foo']
+});
+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') // /nl/products/rode-mok
+</script>
+
+<template>
+  <!-- pages/products/[slug].vue -->
+</template>
+```
+
+### Type
+
+```ts
+declare function useSetI18nParams(options?: SeoAttributesOptions): (locale: Record<Locale, unknown>) => void;
+```
+
+### Parameters
+
+#### `options`
+
+  **Type**: `SeoAttributesOptions | undefined`
+
+  An `SeoAttributesOptions` object, default `undefined`. See the [SEO guide](/guide/seo#feature-details) for more details.
+
+
+
 ## `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/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/playground/layouts/default.vue b/playground/layouts/default.vue
index 42194425f..aa9d56eca 100644
--- a/playground/layouts/default.vue
+++ b/playground/layouts/default.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { useSetI18nParams, useLocaleHead } from '#i18n'
+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>
 
@@ -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/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
new file mode 100644
index 000000000..a1d66a8d1
--- /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',
+    duration: 0,
+    mode: 'default',
+    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>
+    <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..f89dde4c9
--- /dev/null
+++ b/playground/pages/products/[slug].vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { useI18n, useSetI18nParams } from '#i18n'
+import { useRoute } from '#imports'
+const { locale } = 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/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/specs/basic_usage.spec.ts b/specs/basic_usage.spec.ts
index 41cc73023..08d300f19 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)),
@@ -319,3 +319,21 @@ 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')
+
+  expect(await page.locator('#nuxt-locale-link-nl').getAttribute('href')).toEqual('/nl/products/grote-stoel')
+
+  await gotoPath(page, '/nl/products/rode-mok')
+  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/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/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
new file mode 100644
index 000000000..2e7c6a1db
--- /dev/null
+++ b/specs/fixtures/basic_usage/pages/products.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { ref } 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..01841a4b1
--- /dev/null
+++ b/specs/fixtures/basic_usage/pages/products/[slug].vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { useI18n, useSetI18nParams } from '#i18n'
+import { ref, useRoute } from '#imports'
+
+const product = ref()
+const { locale } = useI18n()
+const route = useRoute()
+
+const setI18nParams = useSetI18nParams()
+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>
+  </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
+})
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'
     }
   }
 })
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 be2179698..72545f2c7 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 the `useSetI18nParams` composable instead.'
+      )
+    }
+
     /**
      * nuxt layers handling ...
      */
@@ -296,6 +302,7 @@ export default defineNuxtModule<NuxtI18nOptions>({
         'useLocaleHead',
         'useBrowserLocale',
         'useCookieLocale',
+        'useSetI18nParams',
         NUXT_I18N_COMPOSABLE_DEFINE_ROUTE,
         NUXT_I18N_COMPOSABLE_DEFINE_LOCALE,
         NUXT_I18N_COMPOSABLE_DEFINE_CONFIG
diff --git a/src/runtime/composables/index.ts b/src/runtime/composables/index.ts
index 06136106b..35f97c8bb 100644
--- a/src/runtime/composables/index.ts
+++ b/src/runtime/composables/index.ts
@@ -1,10 +1,14 @@
 import { useRoute, useRouter, useRequestHeaders, useCookie, useNuxtApp } from '#imports'
-import { ref } from 'vue'
+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,
+  getLocale,
+  getLocales,
   useRouteBaseName as _useRouteBaseName,
   useLocalePath as _useLocalePath,
   useLocaleRoute as _useLocaleRoute,
@@ -18,7 +22,70 @@ 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 { LocaleObject, SeoAttributesOptions } 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 object, see {@link SeoAttributesOptions}.
+ *
+ * @returns a {@link SetI18nParamsFunction}.
+ *
+ * @public
+ */
+export type SetI18nParamsFunction = (params: Record<string, unknown>) => void
+export function useSetI18nParams(seoAttributes?: SeoAttributesOptions): SetI18nParamsFunction {
+  const route = useRoute()
+  const head = getActiveHead()
+
+  const i18n = useI18n()
+  const locale = getLocale(i18n)
+  const locales = getNormalizedLocales(getLocales(i18n))
+
+  const i18nParams = computed({
+    get() {
+      return route.meta.nuxtI18n ?? {}
+    },
+    set(val) {
+      route.meta.nuxtI18n = val
+    }
+  })
+
+  const currentLocale = getNormalizedLocales(locales).find(l => l.code === locale) || { code: locale }
+  const currentLocaleIso = currentLocale.iso
+
+  const setMeta = () => {
+    const metaObject: HeadParam = {
+      link: [],
+      meta: []
+    }
+
+    // Adding SEO Meta
+    if (locale && i18n.locales) {
+      addHreflangLinks(locales as LocaleObject[], metaObject, 'id')
+      addCanonicalLinksAndOgUrl(metaObject, 'id', seoAttributes)
+      addCurrentOgLocale(currentLocale, currentLocaleIso, metaObject, 'id')
+      addAlternateOgLocales(locales as LocaleObject[], currentLocaleIso, metaObject, 'id')
+    }
+
+    head?.push(metaObject)
+  }
+
+  return function (params: Record<string, unknown>) {
+    i18nParams.value = { ...params }
+    setMeta()
+  }
+}
 
 /**
  * The `useRouteBaseName` composable returns a function that gets the route's base name.
diff --git a/src/runtime/utils.ts b/src/runtime/utils.ts
index 9848846b8..1195621ae 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,9 @@ import type {
   RouteLocationNormalizedLoaded,
   BaseUrlResolveHandler,
   PrefixableOptions,
-  SwitchLocalePathIntercepter
+  SwitchLocalePathIntercepter,
+  I18nHeadOptions,
+  SeoAttributesOptions
 } from 'vue-i18n-routing'
 import type { I18n, I18nOptions, Locale, FallbackLocale, LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
 import type { NuxtApp } from '#app'
@@ -47,6 +52,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 +497,151 @@ export function extendBaseUrl<Context extends NuxtApp = NuxtApp>(
 }
 
 /* eslint-enable @typescript-eslint/no-explicit-any */
+
+export type HeadParam = Required<Pick<HeadSafe, '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: 'alternate',
+        href: toAbsoluteUrl(localePath, baseUrl.value),
+        hreflang: 'x-default'
+      })
+    }
+  }
+
+  head.link.push(...links)
+}
+
+export function addCanonicalLinksAndOgUrl(
+  head: HeadParam,
+  idAttribute: IdParam,
+  seoAttributesOptions: SeoAttributesOptions = {}
+) {
+  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
+}
diff --git a/src/transform/meta-deprecation.ts b/src/transform/meta-deprecation.ts
new file mode 100644
index 000000000..fcffcf9e0
--- /dev/null
+++ b/src/transform/meta-deprecation.ts
@@ -0,0 +1,64 @@
+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
+}
+
+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 {
+    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
+        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]}`
+        )
+      }
+
+      return result()
+    }
+  }
+})