test: test useI18nParams composable

specs/basic_usage.spec.ts

@@ -296,3 +296,12 @@ test('render with meta components', async () => {
   // rendering link tag and meta tag in head tag
   await assetLocaleHead(page, '#layout-use-locale-head')
 })
+
+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')
+})

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 />

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
       >

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>

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>

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'
+    }
+  }
+]

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

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