feat: v-t directive SSR fully (#3014)

nuxt-modules · Jul 4, 2024 · 0ef6d8b · 0ef6d8b
1 parent 766c38f
commit 0ef6d8b
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/specs/basic_usage.spec.ts b/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')
 

diff --git a/specs/fixtures/basic_usage/config/i18n.config.ts b/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',

diff --git a/specs/fixtures/basic_usage/pages/index.vue b/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>

diff --git a/src/bundler.ts b/src/bundler.ts
@@ -57,6 +57,7 @@ export async function extendBundler(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOp
       compositionOnly: nuxtOptions.bundle.compositionOnly,
       onlyLocales: nuxtOptions.bundle.onlyLocales,
       dropMessageCompiler: nuxtOptions.bundle.dropMessageCompiler,
+      optimizeTranslationDirective: true,
       strictMessage: nuxtOptions.compilation.strictMessage,
       escapeHtml: nuxtOptions.compilation.escapeHtml
     }
@@ -104,6 +105,7 @@ export async function extendBundler(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOp
     fullInstall: nuxtOptions.bundle.fullInstall,
     onlyLocales: nuxtOptions.bundle.onlyLocales,
     dropMessageCompiler: nuxtOptions.bundle.dropMessageCompiler,
+    optimizeTranslationDirective: true,
     strictMessage: nuxtOptions.compilation.strictMessage,
     escapeHtml: nuxtOptions.compilation.escapeHtml,
     defaultSFCLang: nuxtOptions.customBlocks.defaultSFCLang,