diff --git a/__tests__/vue/globals.spec.ts b/__tests__/vue/globals.spec.ts
new file mode 100644
index 00000000..7b5b60af
--- /dev/null
+++ b/__tests__/vue/globals.spec.ts
@@ -0,0 +1,128 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { FluentBundle, FluentResource } from '@fluent/bundle'
+import ftl from '@fluent/dedent'
+
+import { mountWithFluent } from '../utils'
+
+import { createFluentVue } from '../../src'
+
+describe('globals', () => {
+ let bundle: FluentBundle
+
+ beforeEach(() => {
+ bundle = new FluentBundle('en-US')
+ })
+
+ it('can rename t directive', () => {
+ const fluent = createFluentVue({
+ bundles: [bundle],
+ globals: {
+ directive: 'test',
+ },
+ })
+
+ // Arrange
+ bundle.addResource(
+ new FluentResource(ftl`
+ link = Link text
+ `),
+ )
+
+ const component = {
+ template: 'Fallback text',
+ }
+
+ // Act
+ const mounted = mountWithFluent(fluent, component)
+
+ // Assert
+ expect(mounted.html()).toEqual('Link text')
+ })
+
+ it('can rename global $t', () => {
+ const fluent = createFluentVue({
+ bundles: [bundle],
+ globals: {
+ functions: {
+ format: '$test',
+ },
+ },
+ })
+
+ // Arrange
+ bundle.addResource(
+ new FluentResource(ftl`
+ message = Hello, { $name }!
+ `),
+ )
+
+ const component = {
+ data: () => ({
+ name: 'John',
+ }),
+ template: '{{ $test("message", { name }) }}
',
+ }
+
+ // Act
+ const mounted = mountWithFluent(fluent, component)
+
+ // Assert
+ expect(mounted.html()).toEqual('Hello, \u{2068}John\u{2069}!
')
+ })
+
+ it('can rename global $ta', () => {
+ const fluent = createFluentVue({
+ bundles: [bundle],
+ globals: {
+ functions: {
+ formatAttrs: '$test',
+ },
+ },
+ })
+
+ // Arrange
+ bundle.addResource(
+ new FluentResource(ftl`
+ key =
+ .attr = Attr value
+ `),
+ )
+
+ const component = {
+ template: '',
+ }
+
+ // Act
+ const mounted = mountWithFluent(fluent, component)
+
+ // Assert
+ expect(mounted.html()).toEqual('')
+ })
+
+ it('can rename component', () => {
+ const fluent = createFluentVue({
+ bundles: [bundle],
+ globals: {
+ component: 'test',
+ },
+ })
+
+ // Arrange
+ bundle.addResource(
+ new FluentResource(ftl`
+ key = Inner data
+ `),
+ )
+
+ const component = {
+ template: '',
+ }
+
+ // Act
+ const mounted = mountWithFluent(fluent, component)
+
+ // Assert
+ expect(mounted.html()).toEqual('Inner data')
+ })
+})
diff --git a/src/index.ts b/src/index.ts
index df0fb29f..cc2c49c5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -51,25 +51,30 @@ export function createFluentVue(options: FluentVueOptions): FluentVue {
formatWithAttrs: rootContext.formatWithAttrs.bind(rootContext),
install(vue) {
+ const globalFormatName = options.globals?.functions?.format || '$t'
+ const globalFormatAttrsName = options.globals?.functions?.formatAttrs || '$ta'
+ const directiveName = options.globals?.directive || 't'
+ const componentName = options.globals?.component || 'i18n'
+
if (isVue3) {
const vue3 = vue as Vue3
vue3.provide(RootContextSymbol, rootContext)
- vue3.config.globalProperties.$t = function (
+ vue3.config.globalProperties[globalFormatName] = function (
key: string,
value?: Record,
) {
return getContext(rootContext, this as Vue3Component).format(key, value)
}
- vue3.config.globalProperties.$ta = function (
+ vue3.config.globalProperties[globalFormatAttrsName] = function (
key: string,
value?: Record,
) {
return getContext(rootContext, this as Vue3Component).formatAttrs(key, value)
}
- vue3.directive('t', createVue3Directive(rootContext))
+ vue3.directive(directiveName, createVue3Directive(rootContext))
}
else {
const vue2 = vue as Vue2
@@ -82,17 +87,17 @@ export function createFluentVue(options: FluentVueOptions): FluentVue {
},
})
- vue2.prototype.$t = function (key: string, value?: Record) {
+ vue2.prototype[globalFormatName] = function (key: string, value?: Record) {
return getContext(rootContext, this).format(key, value)
}
- vue2.prototype.$ta = function (key: string, value?: Record) {
+ vue2.prototype[globalFormatAttrsName] = function (key: string, value?: Record) {
return getContext(rootContext, this).formatAttrs(key, value)
}
- vue2.directive('t', createVue2Directive(rootContext))
+ vue2.directive(directiveName, createVue2Directive(rootContext))
}
- (vue as Vue).component('i18n', component)
+ (vue as Vue).component(componentName, component)
},
}
}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 46747cb9..750d0685 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -10,8 +10,17 @@ export interface FluentVueOptions {
warnMissing?: ((key: string) => void) | boolean
/** Custom function for parsing markup */
- parseMarkup?: (markup: string) => SimpleNode[]
-}
+ parseMarkup?: (markup: string) => SimpleNode[],
+
+ /** Override the names of the global functions and directive to avoid conflicts */
+ globals?: {
+ functions?: {
+ format?: string
+ formatAttrs?: string
+ },
+ component?: string
+ directive?: string
+ }}
export interface TranslationContextOptions {
warnMissing: (key: string) => void
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy