chore: add useSetI18nParams to playground

nuxt-modules · Nov 29, 2023 · f488e82 · f488e82
1 parent 5cec717
commit f488e82
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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/[locale].ts b/playground/server/api/[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
@@ -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
@@ -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
@@ -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
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import productsData from './products-data'

		export default defineEventHandler(event => productsData)