feat: support Nuxt 4 (#3105)

* test: add test and fixture using `compatibilityVersion: 4`

* fix: remove nuxt version checks

specs/fixtures/basic_usage_compat_4/app/app.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useI18n } from '#i18n'
+import { useRuntimeConfig } from '#imports'
+
+const { finalizePendingLocaleChange } = useI18n()
+
+const skipSettingLocale = useRuntimeConfig().public.i18n.skipSettingLocaleOnNavigate
+const pageTransition = {
+  name: 'my',
+  mode: 'out-in',
+  onBeforeEnter: async () => {
+    await finalizePendingLocaleChange()
+  }
+}
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage id="nuxt-page" :transition="skipSettingLocale ? pageTransition : undefined" />
+  </NuxtLayout>
+</template>
+
+<style>
+section {
+  margin: 1rem 0;
+}
+.my-enter-active,
+.my-leave-active {
+  transition: opacity 0.3s;
+}
+.my-enter,
+.my-leave-active {
+  opacity: 0;
+}
+</style>

specs/fixtures/basic_usage_compat_4/app/app/router.options.ts

@@ -0,0 +1,15 @@
+import { useNuxtApp } from '#imports'
+
+import type { RouterConfig } from '@nuxt/schema'
+
+export default <RouterConfig>{
+  async scrollBehavior(to, from, savedPosition) {
+    const nuxtApp = useNuxtApp()
+
+    if (nuxtApp.$config.public.i18n.skipSettingLocaleOnNavigate && nuxtApp.$18n && to.name !== from.name) {
+      await nuxtApp.$i18n.waitForPendingLocaleChange()
+    }
+
+    return savedPosition || { top: 0 }
+  }
+}

specs/fixtures/basic_usage_compat_4/app/components/BasicUsage.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { navigateTo } from '#imports'
+import { useLocalePath, useSwitchLocalePath, useLocaleRoute, useI18n } from '#i18n'
+
+const { locale, locales } = useI18n()
+const localePath = useLocalePath()
+const switchLocalePath = useSwitchLocalePath()
+const localeRoute = useLocaleRoute()
+
+const category = ref({
+  title: 'Kirby',
+  slug: 'nintendo'
+})
+
+function onClick() {
+  const route = localeRoute({ name: 'user-profile', query: { foo: '1' } })
+  if (route) {
+    return navigateTo(route.fullPath)
+  }
+}
+</script>
+
+<template>
+  <div id="basic-usage-section">
+    <h2>Docs Basic usages</h2>
+    <section id="vue-i18n-usage">
+      <h3>vue-i18n</h3>
+      <div class="vue-i18n">
+        <form>
+          <select v-model="locale">
+            <option value="en">en</option>
+            <option value="fr">fr</option>
+          </select>
+          <p id="welcome-message">{{ $t('welcome') }}</p>
+        </form>
+      </div>
+    </section>
+    <section id="locale-path-usages">
+      <h3>localePath</h3>
+      <ul>
+        <li class="name">
+          <NuxtLink :to="localePath('index')">{{ $t('home') }}</NuxtLink>
+        </li>
+        <li class="path">
+          <NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink>
+        </li>
+        <li class="named-with-locale">
+          <NuxtLink :to="localePath('index', 'en')">Homepage in English</NuxtLink>
+        </li>
+        <li class="nest-path">
+          <NuxtLink :to="localePath('/user/profile')">Route by path to: {{ $t('profile') }}</NuxtLink>
+        </li>
+        <li class="nest-named">
+          <NuxtLink :to="localePath('user-profile')">Route by name to: {{ $t('profile') }}</NuxtLink>
+        </li>
+        <li class="object-with-named">
+          <NuxtLink :to="localePath({ name: 'category-slug', params: { slug: category.slug } })">
+            {{ category.title }}
+          </NuxtLink>
+        </li>
+      </ul>
+    </section>
+    <section id="switch-locale-path-usages">
+      <h3>switchLocalePath</h3>
+      <ul>
+        <li v-for="l in locales" :key="l" :class="`switch-to-${l}`">
+          <NuxtLink :to="switchLocalePath(l)">l</NuxtLink>
+        </li>
+      </ul>
+    </section>
+    <section id="locale-route-usages">
+      <h3>localeRoute</h3>
+      <button @click="onClick">Show profile</button>
+    </section>
+  </div>
+</template>

specs/fixtures/basic_usage_compat_4/app/components/LangSwitcher.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useI18n, useSwitchLocalePath } from '#i18n'
+import { useRoute } from '#imports'
+
+const { locales, locale, setLocale } = useI18n()
+const route = useRoute()
+const switchLocalePath = useSwitchLocalePath()
+
+const localesExcludingCurrent = computed(() => {
+  return locales.value.filter(i => i.code !== locale.value)
+})
+</script>
+
+<template>
+  <div>
+    <section id="lang-switcher-with-nuxt-link">
+      <strong>Using <code>NuxtLink</code></strong
+      >:
+      <NuxtLink
+        v-for="(locale, index) in localesExcludingCurrent"
+        :id="`nuxt-locale-link-${locale.code}`"
+        :key="index"
+        :exact="true"
+        :to="switchLocalePath(locale.code)"
+        >{{ locale.name }}</NuxtLink
+      >
+    </section>
+    <section id="lang-switcher-with-switch-locale-path-link">
+      <strong>Using <code>SwitchLocalePathLink</code></strong
+      >:
+      <SwitchLocalePathLink
+        v-for="(locale, index) in localesExcludingCurrent"
+        :id="`switch-locale-path-link-${locale.code}`"
+        :key="index"
+        :exact="true"
+        :locale="locale.code"
+        >{{ locale.name }}</SwitchLocalePathLink
+      >
+    </section>
+    <section id="lang-switcher-with-set-locale">
+      <strong>Using <code>setLocale()</code></strong
+      >:
+      <a
+        v-for="(locale, index) in localesExcludingCurrent"
+        :id="`set-locale-link-${locale.code}`"
+        :key="`b-${index}`"
+        href="javascript:void(0)"
+        @click.prevent="setLocale(locale.code)"
+        >{{ locale.name }}</a
+      >
+    </section>
+    <section id="lang-switcher-current-locale">
+      <strong
+        >Current Locale: <code>{{ locale }}</code></strong
+      >:
+    </section>
+    <section>
+      <code id="route-path">route: {{ route.path }}</code>
+    </section>
+  </div>
+</template>

specs/fixtures/basic_usage_compat_4/app/components/LocalScope.vue

@@ -0,0 +1,9 @@
+<template>
+  <code id="local-scope-properties">{{ localeProperties }}</code>
+</template>
+
+<script setup lang="ts">
+const { localeProperties } = useI18n({
+  useScope: 'local'
+})
+</script>

specs/fixtures/basic_usage_compat_4/app/layouts/default.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from '#imports'
+import { useI18n, useLocaleHead } from '#i18n'
+
+const route = useRoute()
+const { t } = useI18n()
+const head = useLocaleHead({
+  addDirAttribute: true,
+  identifierAttribute: 'id',
+  addSeoAttributes: { canonicalQueries: ['page'] }
+})
+const title = computed(() => `Page - ${t(route.meta?.title ?? '')}`)
+</script>
+
+<template>
+  <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir">
+    <Head>
+      <Title>{{ title }}</Title>
+      <template v-for="link in head.link" :key="link.id">
+        <Link :id="link.id" :rel="link.rel" :href="link.href" :hreflang="link.hreflang" />
+      </template>
+      <template v-for="meta in head.meta" :key="meta.id">
+        <Meta :id="meta.id" :property="meta.property" :content="meta.content" />
+      </template>
+    </Head>
+    <Body>
+      <slot />
+      <section>
+        <code id="layout-use-locale-head">{{ head }}</code>
+      </section>
+    </Body>
+  </Html>
+</template>

specs/fixtures/basic_usage_compat_4/app/locales/en.json5

@@ -0,0 +1,3 @@
+{
+  'server-key': 'Hello!'
+}

specs/fixtures/basic_usage_compat_4/app/locales/ja.yaml

@@ -0,0 +1 @@
+server-key: 'こんにちは！'

specs/fixtures/basic_usage_compat_4/app/pages/[...pathMatch].vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import LangSwitcher from '../components/LangSwitcher.vue'
+
+const route = useRoute()
+
+const setI18nParams = useSetI18nParams()
+setI18nParams({
+  en: { pathMatch: ['my-post', 'abc'] },
+  fr: { pathMatch: ['mon-article', 'xyz'] }
+})
+</script>
+
+<template>
+  <div>
+    <code id="catch-all-id">{{ route.params.pathMatch.join('/') }}</code>
+    <LangSwitcher />
+  </div>
+</template>

specs/fixtures/basic_usage_compat_4/app/pages/about/index.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n, useLocalePath } from '#i18n'
+import LangSwitcher from '../../components/LangSwitcher.vue'
+
+const { localeProperties } = useI18n()
+const localePath = useLocalePath()
+const code = computed(() => {
+  return localeProperties.value.code
+})
+
+// @ts-ignore
+definePageMeta({
+  title: 'about'
+})
+
+/*
+// TODO: defineNuxtI18n macro
+defineNuxtI18n({
+  paths: {
+    en: '/about-us',
+    fr: '/a-propos'
+  }
+})
+*/
+</script>
+
+<template>
+  <div>
+    <h1 id="about-header">{{ $t('about') }}</h1>
+    <LangSwitcher />
+    <!-- div id="store-path-fr">{{ $store.state.routePathFr }}</div -->
+    <section>
+      <strong
+        >code: <code id="locale-properties-code">{{ code }}</code></strong
+      >
+    </section>
+    <NuxtLink id="link-home" exact :to="localePath('index')">{{ $t('home') }}</NuxtLink>
+  </div>
+</template>

specs/fixtures/basic_usage_compat_4/app/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'
+    }
+  }
+]

specs/fixtures/basic_usage_compat_4/app/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
+})

specs/fixtures/basic_usage_compat_4/app/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
+})

specs/fixtures/basic_usage_compat_4/app/pages/category/[slug].vue

@@ -0,0 +1,3 @@
+<template>
+  <p>This is cateory page on '{{ $route.params.slug }}'</p>
+</template>