feat!: upgrade vue-i18n v10 (#3001)

* feat: upgrade vue-i18n v10

* fix: drop `jit` option

* fix: update version selecting

* docs: updates

* fix: dead link

docs/components/VersionSelect.vue

@@ -4,7 +4,13 @@ const versions = [
     id: '8',
     label: 'v8',
     to: '/docs/getting-started',
-    latest: true
+    tag: 'latest'
+  },
+  {
+    id: '9',
+    label: 'v9',
+    to: '/docs/v9',
+    tag: 'alpha'
   },
   {
     id: '7',
@@ -14,7 +20,9 @@ const versions = [
 ]
 
 const route = useRoute()
-const selectedVersion = computed(() => (route.path.includes('/v7') ? versions[1] : versions[0]))
+const selectedVersion = computed(() =>
+  route.path.includes('/v9') ? versions[1] : route.path.includes('/v7') ? versions[2] : versions[0]
+)
 function changeVersion(newVersion) {
   return navigateTo(newVersion.to)
 }
@@ -31,13 +39,13 @@ function changeVersion(newVersion) {
     >
       <template #label>
         {{ selectedVersion.label }}
-        <UBadge v-if="selectedVersion.latest" variant="subtle" label="latest" size="xs" />
+        <UBadge v-if="selectedVersion.tag" variant="subtle" :label="selectedVersion.tag" size="xs" />
       </template>
 
       <template #option="{ option: version }">
         <div @click="changeVersion(version)" class="w-full">
           {{ version.label }}
-          <UBadge v-if="version.latest" variant="subtle" label="latest" />
+          <UBadge v-if="version.tag" variant="subtle" :label="version.tag" />
         </div>
       </template>
     </USelectMenu>

docs/content/docs/5.v9/1.getting-started/1.index.md

@@ -0,0 +1,90 @@
+---
+title: Installation
+description: Get started with Nuxt i18n module.
+---
+
+::callout{icon="i-heroicons-light-bulb"}
+You are reading the `v9` documentation compatible with **Nuxt 4**. :br Checkout [v8 Docs](/docs/getting-started) for **Nuxt 4** compatible version.
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+Nuxt i18n module is using **Vue I18n v10**. See [Vue i18n docs](https://vue-i18n.intlify.dev/) for more.
+And About Breaking chainge, See the [here](https://vue-i18n.intlify.dev/guide/migration/breaking10.html)
+::
+
+## Quick Start
+
+1. Install `@nuxtjs/i18n` as a dev dependency to your project:
+```bash
+npx nuxi@latest module add i18n
+```
+
+2. Add `@nuxtjs/i18n` to your `nuxt.config` modules:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n']
+})
+```
+
+## Module Options
+
+You can set the module options by using the `i18n` property in `nuxt.config` root.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n'],
+  i18n: {
+    // Module Options
+  }
+})
+```
+
+Alternatively, You can pass an array of the module name and the options object to `modules`
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: [
+    [
+      '@nuxtjs/i18n',
+      {
+        // Module Options
+      }
+    ]
+  ]
+})
+```
+
+## Edge Channel
+
+### Opting in
+
+You can opt in to the latest commits on the `main` branch to avoid waiting for the next release and helping the module by beta testing changes.
+
+Update `@nuxtjs/i18n` dependency in your `package.json`:
+
+```diff [package.json]
+{
+  "devDependencies": {
+-   "@nuxtjs/i18n": "^8.0.0"
++   "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"
+  }
+}
+```
+
+Then remove your lockfile and reinstall the dependencies.
+
+### Opting out
+
+Update `@nuxtjs/i18n` dependency in your `package.json`:
+
+```diff [package.json]
+{
+  "devDependencies": {
+-   "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"
++   "@nuxtjs/i18n": "^8.0.0"
+  }
+}
+```
+
+Then remove your lockfile and reinstall the dependencies.

docs/content/docs/5.v9/1.getting-started/2.usage.md

@@ -0,0 +1,180 @@
+---
+title: Usage
+description: The basics to get started with the Nuxt i18n module is to translate with Vue I18n via the `vueI18n` option.
+---
+
+## Translate with Vue I18n
+
+The basics to get started with **Nuxt i18n module** is to **translate with Vue I18n via the `vueI18n` option**
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n'],
+  i18n: {
+    vueI18n: './i18n.config.ts' // if you are using custom path, default
+  }
+})
+```
+
+```ts [i18n.config.ts]
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      welcome: 'Welcome'
+    },
+    fr: {
+      welcome: 'Bienvenue'
+    }
+  }
+}))
+```
+
+The `i18n.config` file exports the same options as the `createI18n` function of Vue I18n. The configuration is passed to the `createI18n` function via the Nuxt plugin (runtime) of this module internally. For more details about configuration, see the [Vue I18n documentation](https://vue-i18n.intlify.dev/api/general.html#createi18n).
+
+::callout{icon="i-heroicons-light-bulb"}
+The following documentation explains how to use the Nuxt i18n module using Vue I18n Composition API. :br
+For more information on how to use Vue I18n Composition API, please see the docs [here](https://vue-i18n.intlify.dev/guide/advanced/composition.html).
+::
+
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+You can also use Vue I18n's Legacy API in the Nuxt i18n module, this requires configuring [nuxt.config](https://i18n.nuxtjs.org/options/bundle) and i18n.config (`legacy: true`)
+::
+
+Now, put (or edit) the following the page component in `pages` directory of your project:
+
+```vue [pages/index.vue]
+<script setup>
+const { locale, setLocale } = useI18n()
+</script>
+
+<template>
+  <div>
+    <div>
+      <button @click="setLocale('en')">en</button>
+      <button @click="setLocale('fr')">fr</button>
+      <p>{{ $t('welcome') }}</p>
+    </div>
+  </div>
+</template>
+```
+
+You now have a really simple Vue I18n based translation environment ready to go! The `<button>` elements can be used to switch between the English and French languages, by clicking either of the buttons you can see the word "welcome" translate and the page URL change to its corresponding language.
+
+::callout{icon="i-heroicons-light-bulb"}
+For more information about **Vue I18n**, you can refer to its documentation [here](https://vue-i18n.intlify.dev/).
+::
+
+## Auto Imports
+
+Some composable functions provided by `@nuxtjs/i18n` such as `useI18n` are [auto-imported by Nuxt](https://nuxt.com/docs/guide/concepts/auto-imports#auto-imports).
+If you want to import them explicitly, you can use `#imports` as follows:
+
+```vue
+<script setup>
+import { useI18n, useLocalePath } from '#imports'
+// ...
+</script>
+```
+
+## Link localizing
+
+The **Nuxt i18n module** extends the integrated Vue I18n to give us some i18n features for Nuxt application. In here, we introduce one of those features, the link localization with extending Nuxt pages and routing.
+
+### Configurations
+
+You'll need to additionally set the `defaultLocale` and `locales` options, as in the following configuration.
+
+For localizing links, you can use the code provided from the `locales` option as the URL path prefix, except for `defaultLocale` (read more on [routing](/docs/guide)).
+
+```diff [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n'],
+
+  i18n: {
++   locales: ['en', 'fr'], // used in URL path prefix
++   defaultLocale: 'en', // default locale of your project for Nuxt pages and routings
+  }
+})
+```
+
+When rendering internal links in your app using `<NuxtLink>`, you need to get proper URLs for the current locale. To do this, the **Nuxt i18n module** provides some helper composables:
+
+### URL path
+
+You can localize URL paths using `useLocalePath`.
+
+`useLocalePath` is a composable which returns a function used to get the localized URL for a given path. The first parameter can either be the path or name of the route or an object for more complex routes. A locale code can be passed as the second parameter to generate a link for a specific language:
+
+```vue
+<script setup>
+const localePath = useLocalePath()
+</script>
+
+<template>
+  <NuxtLink :to="localePath('index')">{{ $t('home') }}</NuxtLink>
+  <NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink>
+  <NuxtLink :to="localePath('index', 'en')">Homepage in English</NuxtLink>
+  <NuxtLink :to="localePath('/user/profile')">Route by path to: {{ $t('profile') }}</NuxtLink>
+  <NuxtLink :to="localePath('user-profile')">Route by name to: {{ $t('profile') }}</NuxtLink>
+  <NuxtLink :to="localePath({ name: 'category-slug', params: { slug: category.slug } })">
+    {{ category.title }}
+  </NuxtLink>
+</template>
+```
+
+Note that `localePath` can use the route's unprefixed path, which must start with `'/'` or the route's base name to generate the localized URL. The base name corresponds to the names Nuxt generates when parsing your `pages` directory, more info in [Nuxt docs](https://nuxt.com/docs/guide/directory-structure/pages).
+
+::callout{icon="i-heroicons-light-bulb"}
+If you prefer to use the Options API, you can use `this.localePath`. This API is kept for migration from Nuxt 2.
+::
+
+### Language switching path
+
+You can localize the language of the current path using `useSwitchLocalePath`.
+
+`useSwitchLocalePath` is a composable function which returns a link to the current page in another language:
+
+```vue
+<script setup>
+const switchLocalePath = useSwitchLocalePath()
+</script>
+
+<template>
+  <NuxtLink :to="switchLocalePath('en')">English</NuxtLink>
+  <NuxtLink :to="switchLocalePath('fr')">Français</NuxtLink>
+</template>
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+If you prefer to use the Options API, you can use `this.switchLocalePath`. This API is kept for migration from Nuxt 2.
+::
+
+### URL path with Route object
+
+You can localize advanced URL paths using `useLocaleRoute`. This is useful if you would to control internal links programmatically.
+
+`useLocaleRoute` is a composable function that returns a `Route` object for a given page.
+
+It works like `useLocalePath` but returns a route resolved by Vue Router rather than a full route path. This can be useful as the path returned from `useLocalePath` may not carry all information from the provided input (for example, route params that the page doesn't specify).
+
+```vue
+<script setup>
+const localeRoute = useLocaleRoute()
+function onClick() {
+  const route = localeRoute({ name: 'user-profile', query: { foo: '1' } })
+  if (route) {
+    return navigateTo(route.fullPath)
+  }
+}
+</script>
+
+<template>
+  <button @click="onClick">Show profile</button>
+</template>
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+If you prefer to use the Options API, you can use `this.localeRoute`. This API is kept for migration from Nuxt 2.
+::

docs/content/docs/5.v9/1.getting-started/_dir.yml

@@ -0,0 +1,2 @@
+title: Getting Started
+icon: 'i-heroicons-rocket-launch'