fix: v-t SSR

package.json

@@ -85,6 +85,7 @@
     "@intlify/shared": "^9.9.0",
     "@intlify/unplugin-vue-i18n": "^3.0.1",
     "@intlify/utils": "^0.12.0",
+    "@intlify/vue-i18n-extensions": "^5.0.1",
     "@miyaneee/rollup-plugin-json5": "^1.1.2",
     "@nuxt/kit": "^3.10.3",
     "@rollup/plugin-yaml": "^4.1.2",

specs/basic_usage.spec.ts

@@ -75,6 +75,18 @@ describe('basic usage', async () => {
     expect(await page.url()).include('/user/profile?foo=1')
   })
 
+  test('`v-t` directive SSR', async () => {
+    const pageHTML = await $fetch('/')
+    const pageDOM = getDom(pageHTML)
+    expect(pageDOM.querySelector('#t-directive #t-directive-path')?.textContent).toEqual('Welcome')
+    expect(pageDOM.querySelector('#t-directive #t-directive-argument')?.textContent).toEqual('Hello directive!')
+
+    const pageHTMLFrench = await $fetch('/fr')
+    const pageDOMFrench = getDom(pageHTMLFrench)
+    expect(pageDOMFrench.querySelector('#t-directive #t-directive-path')?.textContent).toEqual('Bienvenue')
+    expect(pageDOMFrench.querySelector('#t-directive #t-directive-argument')?.textContent).toEqual('Bonjour directive!')
+  })
+
   test('nuxt context extension', async () => {
     const { page } = await renderPage('/nuxt-context-extension')
 

specs/fixtures/basic_usage/config/i18n.config.ts

@@ -16,7 +16,8 @@ export default defineI18nConfig(() => {
         snakeCaseText: "@.snakeCase:{'aboutSite'}",
         pascalCaseText: "@.pascalCase:{'aboutSite'}",
         hello: 'Bonjour le monde!',
-        modifier: "@.snakeCase:{'hello'}"
+        modifier: "@.snakeCase:{'hello'}",
+        helloMessage: 'Bonjour {name}!'
       },
       en: {
         home: 'Homepage',
@@ -28,7 +29,8 @@ export default defineI18nConfig(() => {
         hello: 'Hello world!',
         modifier: "@.snakeCase:{'hello'}",
         fallbackMessage: 'This is the fallback message!',
-        runtimeKey: config.public.runtimeValue
+        runtimeKey: config.public.runtimeValue,
+        helloMessage: 'Hello {name}!'
       },
       nl: {
         aboutSite: 'Over deze site',

specs/fixtures/basic_usage/pages/index.vue

@@ -98,6 +98,10 @@ useHead({
       >:
       <code id="home-use-locale-head">{{ i18nHead }}</code>
     </section>
+    <section id="t-directive">
+      <p id="t-directive-path" v-t="'welcome'"></p>
+      <p id="t-directive-argument" v-t="{ path: 'helloMessage', args: { name: 'directive' } }"></p>
+    </section>
     <section id="locale-path-usages">
       <h3>localePath</h3>
       <ul>

src/module.ts

@@ -12,6 +12,7 @@ import {
   useLogger
 } from '@nuxt/kit'
 import { resolve, relative } from 'pathe'
+import { transformVTDirective } from '@intlify/vue-i18n-extensions'
 import { defu } from 'defu'
 import { setupAlias } from './alias'
 import { setupPages } from './pages'
@@ -360,7 +361,16 @@ export default defineNuxtModule<NuxtI18nOptions>({
     ])
 
     /**
-     * transpile @nuxtjs/i18n
+     * Directive transformation for `v-t` SSR
+     */
+
+    // Use `legacy` as global injections are prefixed (`$t`)
+    const transformVT = transformVTDirective({ mode: 'legacy' })
+    nuxt.options.vue.compilerOptions.directiveTransforms ??= {}
+    nuxt.options.vue.compilerOptions.directiveTransforms.t = transformVT
+
+    /**
+     * Transpile @nuxtjs/i18n
      */
 
     // https://github.com/nuxt/framework/issues/5257