@intlify/vue-i18n-extensions API References

Table Of Contents

• Function
  • transformVTDirective
• Interface
  • TransformVTDirectiveOptions
• TypeAlias
  • TranslationSignatureResolver

Function

transformVTDirective

Transform v-t custom directive

Signature:

declare function transformVTDirective<Messages extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/no-empty-object-type -- TODO: fix this
DateTimeFormats extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/no-empty-object-type -- TODO: fix this
NumberFormats extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/no-empty-object-type -- TODO: fix this
Legacy extends boolean = true>(options?: TransformVTDirectiveOptions<Messages, DateTimeFormats, NumberFormats, Legacy>): DirectiveTransform;

Parameters

Parameter	Type	Description
options	TransformVTDirectiveOptions<Messages, DateTimeFormats, NumberFormats, Legacy>	v-t custom directive transform options, see TransformVTDirectiveOptions

Returns

Directive transform

Remarks

Transform that v-t custom directive is optimized vue-i18n code by Vue compiler. This transform can improve the performance by pre-translating, and it does support SSR.

Examples

import { compile } from '@vue/compiler-dom'
import { createI18n } from 'vue-i18n'
import { transformVTDirective } from '@intlify/vue-i18n-extensions'

// create i18n instance
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      hello: 'hello'
    },
    ja: {
      hello: 'こんにちは'
    }
  }
})

// get transform from  `transformVTDirective` function, with `i18n` option
const transformVT = transformVTDirective({ i18n })

const { code } = compile(`<p v-t="'hello'"></p>`, {
  mode: 'function',
  hoistStatic: true,
  prefixIdentifiers: true,
  directiveTransforms: { t: transformVT } // <- you need to specify to `directiveTransforms` option!
})

console.log(code)
// output ->
//   const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
//   return function render(_ctx, _cache) {
//     return (_openBlock(), _createBlock(\\"div\\", null, \\"こんにちは！\\"))
//   }

Interface

TransformVTDirectiveOptions

Transform options for v-t custom directive

Signature:

interface TransformVTDirectiveOptions<Messages extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/no-empty-object-type -- TODO: fix this
DateTimeFormats extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/no-empty-object-type -- TODO: fix this
NumberFormats extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/no-empty-object-type -- TODO: fix this
Legacy extends boolean = true> 

Properties

i18n

I18n instance

Signature:

i18n?: I18n<Messages, DateTimeFormats, NumberFormats, Legacy>;

Remarks

If this option is specified, v-t custom directive transform uses an I18n instance to pre-translate. The translation will use the global resources registered in the I18n instance, that is, v-t directive transform is also a limitation that the resources of each component cannot be used.

mode

I18n Mode

Signature:

mode?: I18nMode;

Remarks

Specify the API style of vue-i18n. If you use legacy API style (e.g. $t) at vue-i18n, you need to specify legacy.

'composition'

translationSignatures

Translation function signatures

Signature:

translationSignatures?: string | TranslationSignatureResolver | string[] | TranslationSignatureResolver[] | (string | TranslationSignatureResolver)[];

Remarks

You can specify the signature of the translation function attached to the binding context when it is codegen in the Vue Compiler. If you have changed the signature to a non t signature in the setup hook or <script setup>, you can safely SSR it. If each Vue component has a different signature for the translation function, you can specify several in an array for safe SSR. This option value is undefined and the signature attached to the binding context is t.

TypeAlias

TranslationSignatureResolver

Translation signature resolver

Signature:

type TranslationSignatureResolver = (context: TransformContext, baseResolver: (context: TransformContext, signature: string) => string | undefined) => string | undefined;

Remarks

This resolver is used at 'translationSignatures' option

###1 Examples

import { compile } from '@vue/compiler-dom'
import { transformVTDirective } from '@intlify/vue-i18n-extensions'

// the below is just an example, you can use your own signature resolver
const signatureMap = new Map()

const transformVT = transformVTDirective({
  translationSignatures: (context) => {
    const { prefixIdentifiers, bindingMetadata, inline, filename } = context
    let signature = ''

    // something logic to resolve signature like using `signatureMap`
    // signature = signatureMap.get(filename)
    // ...

    return signature
  }
})

const { code } = compile(`<p v-t="'hello'"></p>`, {
  // ...
  directiveTransforms: { t: transformVT }
})