Add SSR support for v-t directive

Demivan · Demivan · commit 76e63237bd21 · 2021-10-16T13:17:28.000+03:00
diff --git a/nuxt-2/components/Tutorial.vue b/nuxt-2/components/Tutorial.vue
@@ -20,10 +20,10 @@
         <SwitchLocale />
 
         <p class="mt-4 pt-1">
-          Directive: <span v-t:message-from-ftl />
+          Directive: <span class="text-gray-600" v-t:message-from-ftl />
         </p>
         <p class="mt-4 pt-1">
-          Method: <span>{{ $t('message-from-ftl') }}</span>
+          Method: <span class="text-gray-600">{{ $t('message-from-ftl') }}</span>
         </p>
       </div>
       <div class="flex justify-center pt-4 space-x-2">
diff --git a/nuxt-2/locales/en.ftl b/nuxt-2/locales/en.ftl
@@ -1 +1,2 @@
 message-from-ftl = This is a message from English ftl file
+  .title = English title
diff --git a/nuxt-2/modules/fluent-vue.js b/nuxt-2/modules/fluent-vue.js
@@ -12,5 +12,45 @@ export default function FluentVueModule () {
       type: 'javascript/auto',
       loader: require.resolve('fluent-vue-loader')
     })
+
+    const vueRule = config.module.rules.find(rule => rule.loader.includes('vue-loader'))
+
+    if (!vueRule) {
+      console.error('Could not find vue-loader rule in webpack config')
+    }
+
+    vueRule.options.compilerOptions = vueRule.options.compilerOptions || {}
+    vueRule.options.compilerOptions.directives = vueRule.options.directives || {}
+    vueRule.options.compilerOptions.directives.t = function (el, dir) {
+      function rangeSetItem (
+        item,
+        range
+      ) {
+        if (range) {
+          if (range.start != null) {
+            item.start = range.start
+          }
+          if (range.end != null) {
+            item.end = range.end
+          }
+        }
+        return item
+      }
+
+      function addProp (el, name, value, range, dynamic) {
+        (el.props || (el.props = [])).push(rangeSetItem({ name, value, dynamic }, range))
+        el.plain = false
+      }
+
+      const previousWrapData = el.wrapData
+      el.wrapData = (code) => {
+        if (previousWrapData) 
+          code = previousWrapData(code)
+
+        return `_b(${code},'${el.tag}',$ta('${dir.arg}'),false)`
+      }
+
+      addProp(el, 'textContent', `_s($t('${dir.arg}'))`, dir)
+    }
   })
 }

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`message-from-ftl = This is a message from English ftl file`
	`2`	`+ .title = English title`