docs: set v9 docs as default

docs/app.config.ts

@@ -2,18 +2,18 @@ export default defineAppConfig({
   default: {
     ui: {
       primary: 'green',
-      gray: 'slate'
+      gray: 'zinc'
     }
   },
-  v9: {
+  legacy: {
     ui: {
       primary: 'green',
-      gray: 'zinc'
+      gray: 'slate'
     }
   },
   ui: {
     primary: 'green',
-    gray: 'slate',
+    gray: 'zinc',
     footer: {
       bottom: {
         left: 'text-sm text-gray-500 dark:text-gray-400',

docs/components/VersionSelect.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 const versions = [
   {
-    id: '8',
-    label: 'v8',
+    id: '9',
+    label: 'v9',
     to: '/docs/getting-started',
-    tag: 'latest'
+    tag: 'rc'
   },
   {
-    id: '9',
-    label: 'v9',
-    to: '/docs/v9',
-    tag: 'alpha'
+    id: '8',
+    label: 'v8',
+    to: '/docs/v8',
+    tag: 'stable'
   },
   {
     id: '7',
@@ -23,7 +23,7 @@ const router = useRouter()
 const selectedVersion = computed(() => {
   const path = router.currentRoute.value.path
 
-  if (path.includes('/v9')) return versions[1]
+  if (path.includes('/v8')) return versions[1]
   if (path.includes('/v7')) return versions[2]
 
   return versions[0]

docs/composables/usePageMeta.ts

@@ -8,7 +8,7 @@ export default function usePageMeta() {
   const route = useRoute()
   function setPageMeta({ title = '', description = '', headline = '' }: PageMeta) {
     useSeoMeta({ title, ogTitle: title, description, ogDescription: description })
-    defineOgImageComponent(route.path.includes('/docs/v9') ? 'DocsV9' : 'Docs', { title, description, headline })
+    defineOgImageComponent(/\/docs\/v[7-8]/.test(route.path) ? 'Docs' : 'DocsV9', { title, description, headline })
   }
 
   return { setPageMeta }

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

@@ -1,59 +1,30 @@
 ---
 title: Installation
-description: Get started with Nuxt i18n module.
+description: Get started with Nuxt I18n module.
 ---
 
 ::callout{icon="i-heroicons-light-bulb"}
-You are reading the `v8` documentation compatible with **Nuxt 3**. :br Checkout [v7 Docs](/docs/v7) for **Nuxt 2** compatible version.
-::
-
-::callout{icon="i-heroicons-light-bulb"}
-Nuxt i18n module is using **Vue i18n v9**. See [Vue i18n docs](https://vue-i18n.intlify.dev/) for more.
+Nuxt I18n module is using **Vue I18n v10**. Refer to its documentation at [Vue i18n docs](https://vue-i18n.intlify.dev/) and review the migration page on breaking changes introduced in its major release [here](https://vue-i18n.intlify.dev/guide/migration/breaking10.html)
 ::
 
 ## Quick Start
 
-1. Install `@nuxtjs/i18n` as a dev dependency to your project:
+1. Add the `@nuxtjs/i18n` module 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']
-})
+npx nuxi@latest module add @nuxtjs/i18n@next
 ```
 
-## Module Options
-
-You can set the module options by using the `i18n` property in `nuxt.config` root.
+2. Configure `@nuxtjs/i18n` using the `i18n` key in the project `nuxt.config`:
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxtjs/i18n'],
   i18n: {
-    // Module Options
+    // options here
   }
 })
 ```
 
-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

docs/content/docs/2.guide/15.layers.md

@@ -37,7 +37,6 @@ export default defineNuxtConfig({
   modules: ['@nuxtjs/i18n'],
   i18n: {
     lazy: true,
-    langDir: './lang',
     locales: [
       { code: 'en', file: 'en.json' },
       { code: 'nl', file: 'nl.json' }
@@ -60,7 +59,6 @@ Locales provided by a project will be merged with those provided by extended lay
 export default defineNuxtConfig({
   extends: ['my-layer'],
   i18n: {
-    langDir: './lang',
     locales: [{ code: 'en', file: 'en.json' }]
   }
 })
@@ -71,7 +69,6 @@ export default defineNuxtConfig({
   modules: ['@nuxtjs/i18n'],
   i18n: {
     lazy: true,
-    langDir: './lang',
     locales: [
       { code: 'en', file: 'en.json' },
       { code: 'nl', file: 'nl.json' }
@@ -83,20 +80,20 @@ export default defineNuxtConfig({
 ::
 
 ::callout{icon="i-heroicons-light-bulb"}
-Note how some options such as `lazy` are inherited, while options such as `langDir` and `locales` need to be set for every layer (project included) providing locale files.
+Note how some options such as `lazy` are inherited, while options such as `locales` need to be set for every layer (project included) providing locale files.
 ::
 
 This example would result in the project supporting two locales (`en`, `nl`) and would add the additional messages added for the `en` locale.
 
 ::code-group
 
-```ts [project/lang/en.json]
+```ts [project/i18n/locales/en.json]
 {
   "title": "foo"
 }
 ```
 
-```ts [project/my-layer/lang/en.json]
+```ts [project/my-layer/i18n/locales/en.json]
 {
   "title": "layer title",
   "description": "bar"

docs/content/docs/2.guide/16.server-side-translations.md

@@ -17,7 +17,7 @@ Nuxt i18n exports the `defineI18nLocaleDetector` composable function to define i
 
 The following is an example of how to define a detector that detects locale using query, cookie, and header:
 
-```ts [localeDetector.ts]
+```ts [i18n/localeDetector.ts]
 // Detect based on query, cookie, header
 export default defineI18nLocaleDetector((event, config) => {
   // try to get locale from query
@@ -53,7 +53,7 @@ The following is an example of a locale detector configuration defined directly
 export default defineNuxtConfig({
   i18n: {
     experimental: {
-      localeDetector: './localeDetector.ts'
+      localeDetector: 'localeDetector.ts'
     }
   }
 })

docs/content/docs/5.v9/2.guide/19.breaking-changes-in-v9.md → docs/content/docs/2.guide/19.breaking-changes-in-v9.md

@@ -76,14 +76,14 @@ This table compares the option properties of `useLocaleHead` and `$localeHead fo
 | `addSeoAttributes` | `seo` | Default changed: `false` -> `true` |
 | `identifierAttribute` | `key` | |
 
-We have added a `lang` property to the options parameter of `useLocaleHead` and `$localeHead`, originally this was not configurable on its own, see [`useLocaleHead`](/docs/v9/api#useLocaleHead) for details on its usage.
+We have added a `lang` property to the options parameter of `useLocaleHead` and `$localeHead`, originally this was not configurable on its own, see [`useLocaleHead`](/docs/api#useLocaleHead) for details on its usage.
 
 
 
 
 ## Nuxt context functions
 
-In v8 both the types and name of the injected context functions (such as `$localePath`, `$switchLocalePath` and [more](/docs/v9/api/nuxt)) did not work as intended. You may have found that these functions worked when using them without prefix (`$`) even when not assigning these functions from a composable. 
+In v8 both the types and name of the injected context functions (such as `$localePath`, `$switchLocalePath` and [more](/docs/api/nuxt)) did not work as intended. You may have found that these functions worked when using them without prefix (`$`) even when not assigning these functions from a composable. 
 
 The types and names have been fixed in v9, if you have been using the unprefixed functions globally (without composable) in your project you will have to prefix these functions as they were originally intended.
 

docs/content/docs/2.guide/6.seo.md

@@ -77,11 +77,7 @@ To avoid duplicating the code, it's recommended to set globally with [Meta Compo
 <script setup>
 const route = useRoute()
 const { t } = useI18n()
-const head = useLocaleHead({
-  addDirAttribute: true,
-  identifierAttribute: 'id',
-  addSeoAttributes: true
-})
+const head = useLocaleHead()
 const title = computed(() => t(route.meta.title ?? 'TBD', t('layouts.title'))
 );
 </script>
@@ -245,6 +241,7 @@ useHead({
     ```vue
     <script setup>
     const i18nHead = useLocaleHead({
+      addLangAttribute: true,
       addSeoAttributes: {
         canonicalQueries: ['foo']
       }

docs/content/docs/2.guide/7.lazy-load-translations.md

@@ -8,7 +8,6 @@ This can be achieved with **Nuxt i18n module** by letting the module know where
 To enable translations lazy-loading, follow these steps when configuring **Nuxt i18n module**:
 
 - Set `lazy` option to `true` (or to [configuration object](/docs/options/lazy#lazy) if you want to customize some options).
-- Set `langDir` option to the directory (cannot be empty) that contains your translation files.
 - Configure `locales` option as an array of objects, where each object has a `file` or `files` key whose value is the translation file corresponding to the locale.
 - Optionally, remove all messages that you might have passed to Vue I18n via the `vueI18n` option.
 - Each `file` or `files` can return either an `Object`, or a function that returns `Promise` which must return an `Object`.
@@ -19,10 +18,11 @@ Example files structure:
 
 ```
 nuxt-project/
-├── lang/
-│   ├── en-US.json
-│   ├── es-ES.js
-│   ├── fr-FR.ts
+├── i18n/
+│   ├── locales/
+│   │   ├── en-US.json
+│   │   ├── es-ES.js
+│   │   ├── fr-FR.ts
 ├── nuxt.config.ts
 ```
 
@@ -46,7 +46,6 @@ export default defineNuxtConfig({
       }
     ],
     lazy: true,
-    langDir: 'lang',
     defaultLocale: 'en'
   }
 })
@@ -97,12 +96,13 @@ The following is an example of a lang directory containing locale files for the
 
 ```
 nuxt-project/
-├── lang/
-│   ├── es.json     # locale messages for common Spanish
-│   ├── es-AR.json  # locale messages for Argentina
-│   ├── es-UY.json  # locale messages for Uruguay
-│   ├── es-US.json  # locale messages for Estados Unidos
-|   ...             # other countries ...
+├── i18n/
+│   ├── locales/
+│   │   ├── es.json     # locale messages for common Spanish
+│   │   ├── es-AR.json  # locale messages for Argentina
+│   │   ├── es-UY.json  # locale messages for Uruguay
+│   │   ├── es-US.json  # locale messages for Estados Unidos
+|   |   ...             # other countries ...
 ├── nuxt.config.ts
 ```
 
@@ -135,7 +135,6 @@ export default defineNuxtConfig({
       }
     ],
     lazy: true,
-    langDir: 'lang',
     defaultLocale: 'en'
   }
 })
@@ -187,7 +186,6 @@ export default defineNuxtConfig({
       }
     ],
     lazy: true,
-    langDir: 'lang',
     defaultLocale: 'en'
   }
 })

docs/content/docs/2.guide/8.lang-switcher.md

@@ -238,54 +238,6 @@ route.meta.pageTransition.onBeforeEnter = async () => {
 </style>
 ```
 
-## Dynamic route parameters using `definePageMeta` (Deprecated)
-
-::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
-Dynamic route params using `nuxtI18n` on `definePageMeta` has been deprecated and will be removed in `v9`, use the composable [`useSetI18nParams`](/docs/api#useseti18nparams) instead.
-::
-
-Dynamic params can be configured using `definePageMeta`. These will be merged with route params when generating lang switch routes with `switchLocalePath()`.
-
-::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
-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>
-```
-
 ## Vue i18n caveat
 
 In contrast to Vue i18n you should not directly set `locale`, switch language by using [`setLocale`](/docs/api/vue-i18n#setlocale) or navigating to a route returned by [`switchLocalePath`](/docs/api#useswitchlocalepath). This loads translations, triggers hooks and updates the locale cookie if used.

docs/content/docs/3.options/10.misc.md

@@ -18,6 +18,9 @@ About how to define the locale detector, see the [`defineI18nLocaleDetector` API
 - `autoImportTranslationFunctions` (default: `false`) - Automatically imports/initializes `$t`, `$rt`, `$d`, `$n`, `$tm` and `$te` functions in `<script setup>` when used.
 ::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 This feature relies on [Nuxt's Auto-imports](https://nuxt.com/docs/guide/concepts/auto-imports) and will not work if this has been disabled.
+- `typedPages` (default: `true`) - Generates route types used in composables and configuration, this feature is enabled by default when Nuxt's `experimental.typedRoutes` is enabled.
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+This feature relies on [Nuxt's `experimental.typedRoutes`](https://nuxt.com/docs/guide/going-further/experimental-features#typedpages) and will not work if this is not enabled.
 ::
 
 
@@ -47,10 +50,10 @@ If it can not detect Nuxt configuration changing, you may need to run `nuxi prep
 
 ## `debug`
 
-- type: `boolean`
+- type: `boolean | 'verbose'`
 - default: `false`
 
-Whether to use `@nuxtjs/i18n` debug mode. If `true`, logs will be output to the console.
+Whether to use `@nuxtjs/i18n` debug mode. If `true` or `'verbose'`, logs will be output to the console, setting this to `'verbose'` will also log loaded messages objects.
 
 ::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 The purpose of this option is to help identify any problems with `@nuxtjs/i18n`.
@@ -67,11 +70,7 @@ Set the plugin as `parallel`. See [nuxt plugin loading strategy](https://nuxt.co
 
 ## `restructureDir`
 
-- type: `string | undefined`
-- default: `undefined`
+- type: `string`
+- default: `i18n`
 
-Can be used to configure the directory used to resolve i18n files, this will be set to `i18n` by default in the v9 release.
-
-::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
-Setting this value will also change the default value for `langDir`, which is `locales` if unset, this is the new default value in v9.
-::
+Can be used to configure the directory used to resolve i18n files.