Make LL available globally in Vue templates

[nkoehring]

Currently, if I understood it right, every component that wants to use translation strings, needs to explicitly import the i18nObject (eg via const { LL } = typesafeI18n()). It would be great to have it as a global property, usually $t, but I'd understand if you prefer $LL or similar.

I tried to achieve this directly in main.ts, but failed:

import { i18nPlugin, typesafeI18n } from './i18n/i18n-vue'

const app = createApp(App)
app.use(i18nPlugin, detectedLocale)

const { LL } = typesafeI18n()
app.config.globalProperties.$LL = LL
app.mount("#app")

It seems like LL is not yet initialized at that time. I'm getting Uncaught TypeError: (intermediate value)() is undefined.

[ivanhofer]

I too prefer a global object, but I could not make it work for Vue in a typesafe way. Maybe you can try this:

import type { TranslationFunctions } from './i18n/i18n-types'
import { i18nPlugin, typesafeI18n } from './i18n/i18n-vue'

export const setLL = (LL: TranslationFunctions) => app.config.globalProperties.$LL = LL

const app = createApp(App)
app.use(i18nPlugin, detectedLocale)

app.mount("#app")

and then call setLL inside the App component