feat!: promote autoImportTranslationFunctions (#3523)

Author: BobbieGoede

docs/content/docs/02.guide/90.migrating.md

@@ -10,6 +10,9 @@ We have upgrade from Vue I18n v10 to v11, this major version bump deprecates the
 
 Check the documentation detailing the breaking changes [here](https://vue-i18n.intlify.dev/guide/migration/breaking11.html).
 
+### Promote `experimental.autoImportTranslationFunctions` to `autoDeclare`
+This functionality is stable and is now enabled by default, the option has been moved out of the `experimental` configuration object and renamed to `autoDeclare`.
+
 ### Promote `experimental.switchLocalePathLinkSSR`
 This functionality is stable and is now enabled by default and the option to enable/disable it has been removed.
 

docs/content/docs/04.api/00.options.md

@@ -452,16 +452,6 @@ Experimental configuration property is an object with the following properties:
 For more details on how to define the locale detector, see the [`defineI18nLocaleDetector()`{lang="ts"} API](/docs/composables/define-i18n-locale-detector)
 ::
 
-### `autoImportTranslationFunctions`
-
-- type: `boolean`{lang="ts-type"}
-- default: `false`{lang="ts"}
-- Automatically imports/initializes `$t()`{lang="ts"}, `$rt()`{lang="ts"}, `$d()`{lang="ts"}, `$n()`{lang="ts"}, `$tm()`{lang="ts"} and `$te()`{lang="ts"} functions in `<script setup>`{lang="html"} when used.
-
-::callout{icon="i-heroicons-exclamation-triangle" color="warning"}
-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`
 
 - type: `boolean`{lang="ts-type"}
@@ -616,3 +606,13 @@ Set the plugin as `parallel`. See [nuxt plugin loading strategy](https://nuxt.co
 - default: `'i18n'`{lang="ts-type"}
 
 Used to configure the directory used to resolve i18n files.
+
+## autoDeclare
+
+- type: `boolean`{lang="ts-type"}
+- default: `true`{lang="ts"}
+- Automatically imports/initializes `$t()`{lang="ts"}, `$rt()`{lang="ts"}, `$d()`{lang="ts"}, `$n()`{lang="ts"}, `$tm()`{lang="ts"} and `$te()`{lang="ts"} functions in `<script setup>`{lang="html"} when used.
+
+::callout{icon="i-heroicons-exclamation-triangle" color="warning"}
+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.
+::

specs/basic-usage-tests.ts

@@ -530,14 +530,12 @@ export function basicUsageTests() {
     expect(await getText(page, '#install-module-vue-i18n')).toEqual('Installer module vue-i18n works!')
   })
 
-  describe('experimental.autoImportTranslationFunctions', async () => {
-    test('can use `$t` in `<template>`', async () => {
-      const { consoleLogs } = await renderPage('/experimental/auto-import-translation-functions')
+  test('can use `$t` in `<template>` with `autoDeclare``', async () => {
+    const { consoleLogs } = await renderPage('/experimental/auto-import-translation-functions')
 
-      const logStrings = consoleLogs.map(x => x.text)
-      expect(logStrings).toContain('[autoImportTranslationFunctions][default]: Welcome')
-      expect(logStrings).toContain('[autoImportTranslationFunctions][fr]: Bienvenue')
-    })
+    const logStrings = consoleLogs.map(x => x.text)
+    expect(logStrings).toContain('[autoDeclare][default]: Welcome')
+    expect(logStrings).toContain('[autoDeclare][fr]: Bienvenue')
   })
 
   test('dynamic parameters render and update reactively client-side', async () => {

specs/fixtures/basic_usage/nuxt.config.ts

@@ -20,8 +20,7 @@ export default defineNuxtConfig({
     locales: ['en', 'fr'],
     defaultLocale: 'en',
     experimental: {
-      alternateLinkCanonicalQueries: false,
-      autoImportTranslationFunctions: true
+      alternateLinkCanonicalQueries: false
     }
   }
 })

specs/fixtures/basic_usage/pages/experimental/auto-import-translation-functions.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-console.log(`[autoImportTranslationFunctions][default]: ${$t('welcome')}`)
-console.log(`[autoImportTranslationFunctions][fr]: ${$t('welcome', 1, { locale: 'fr' })}`)
+console.log(`[autoDeclare][default]: ${$t('welcome')}`)
+console.log(`[autoDeclare][fr]: ${$t('welcome', 1, { locale: 'fr' })}`)
 </script>
 
 <template>

specs/fixtures/basic_usage_compat_4/app/pages/experimental/auto-import-translation-functions.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-console.log(`[autoImportTranslationFunctions][default]: ${$t('welcome')}`)
-console.log(`[autoImportTranslationFunctions][fr]: ${$t('welcome', 1, { locale: 'fr' })}`)
+console.log(`[autoDeclare][default]: ${$t('welcome')}`)
+console.log(`[autoDeclare][fr]: ${$t('welcome', 1, { locale: 'fr' })}`)
 </script>
 
 <template>

specs/fixtures/basic_usage_compat_4/nuxt.config.ts

@@ -24,7 +24,6 @@ export default defineNuxtConfig({
     defaultLocale: 'en',
     experimental: {
       alternateLinkCanonicalQueries: false,
-      autoImportTranslationFunctions: true,
       localeDetector: './localeDetector.ts'
     }
   }

src/bundler.ts

@@ -74,7 +74,7 @@ export function createLogger(label) {
     webpack: () => VueI18nPlugin.webpack(vueI18nPluginOptions)
   })
   addBuildPlugin(TransformMacroPlugin(pluginOptions))
-  if (options.experimental.autoImportTranslationFunctions) {
+  if (options.autoDeclare) {
     addBuildPlugin(TransformI18nFunctionPlugin(pluginOptions))
   }
 

src/constants.ts

@@ -27,7 +27,6 @@ export const DEFAULT_OPTIONS = {
   restructureDir: 'i18n',
   experimental: {
     localeDetector: '',
-    autoImportTranslationFunctions: false,
     typedPages: true,
     typedOptionsAndMessages: false,
     alternateLinkCanonicalQueries: false,
@@ -77,7 +76,8 @@ export const DEFAULT_OPTIONS = {
   debug: false,
   parallelPlugin: false,
   multiDomainLocales: false,
-  hmr: true
+  hmr: true,
+  autoDeclare: true
 } as const
 
 export const NUXT_I18N_TEMPLATE_OPTIONS_KEY = 'i18n.options.mjs'

src/gen.ts

@@ -245,7 +245,7 @@ declare module '#app' {
 
 ${typedRouterAugmentations}
 
-${(options.experimental?.autoImportTranslationFunctions && globalTranslationTypes) || ''}
+${(options.autoDeclare && globalTranslationTypes) || ''}
 
 export {}`
 }