Skip to content

Commit d814e0a

Browse files
authored
Merge pull request #59 from ragulka/refactor-to-class-instance
Refactor to class instance, allowing multiple instances
2 parents 3ffdf77 + e7d772c commit d814e0a

File tree

4 files changed

+426
-178
lines changed

4 files changed

+426
-178
lines changed

README.md

Lines changed: 79 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -148,8 +148,9 @@ mix.i18n();
148148
### Plugin Options
149149

150150
- `lang` *(optional)*: If not provided it will try to find from the `<html lang="pt">` tag.
151-
- `fallbackLang` *(optional): If the `lang` was not provided or is invalid, it will try reach for this `fallbackLang` instead, default is: `en`.
151+
- `fallbackLang` *(optional)*: If the `lang` was not provided or is invalid, it will try reach for this `fallbackLang` instead, default is: `en`.
152152
- `resolve` *(required)*: The way to reach your language files.
153+
- `shared` *(optional)*: whether to [share the same `I18n` instance](#using-multiple-instances) between different Vue apps. Defaults to `true`.
153154

154155
```js
155156
createApp().use(i18nVue, {
@@ -193,7 +194,7 @@ setup() {
193194
return {
194195
welcomeLabel: wTrans('Welcome!'),
195196
welcomeFrancisco: wTrans('Welcome, :name!', { name: 'Francisco' })
196-
}
197+
}
197198
}
198199
199200
<template>
@@ -243,7 +244,7 @@ setup() {
243244
return {
244245
oneAppleLabel: wTransChoice('There is one apple|There are many apples', 1),
245246
multipleApplesLabel: wTransChoice('{0} There are none|[1,19] There are some|[20,*] There are many', 19)
246-
}
247+
}
247248
}
248249
249250
<template>
@@ -287,3 +288,78 @@ import { isLoaded } from 'laravel-vue-i18n';
287288
const loaded = isLoaded(); // true
288289
const loaded = isLoaded('fr'); // false
289290
```
291+
292+
## Using multiple instances
293+
294+
Under the hood, the Vue plugin is using a `I18n` class which encapsulates all the translation logic and the currently active language. This means that it's possible to create multiple class instances, each with different options and active language. This can be useful for scenarios where part of the app needs to be translated to a language different from the main UI.
295+
296+
Note that loaded languages are still shared between different instances. This avoids loading the same set of translations multiple times. The main difference between different instances will be the currently active language.
297+
298+
```js
299+
import { I18n } from 'laravel-vue-i18n'
300+
301+
const resolver = lang => import(`./fixtures/lang/${lang}.json`)
302+
303+
const i18nEn = new I18n({
304+
lang: 'en',
305+
resolve: resolver
306+
})
307+
const i18nPt = new I18n({
308+
lang: 'pt',
309+
resolve: resolver
310+
})
311+
312+
i18nEn.trans('Welcome!') // will output "Welcome!"
313+
i18nPt.trans('Welcome!') // will output "Bem-vindo!"
314+
```
315+
316+
By default, installing the the `i18nVue` plugin will create a shared instance. This instance is accessed when importing the translation functions, such as `trans`, directly. When using multiple Vue app instances, it's possible to either share the `I18n` instance between them, or have each app create its own instance.
317+
318+
**Shared usage (default)** - all Vue app instances will use the same `I18n` class and currently active language:
319+
```js
320+
import { i18nVue } from 'laravel-vue-i18n'
321+
322+
const appA = createApp()
323+
.use(i18nVue, { lang: 'pt' })
324+
.mount('#app-1');
325+
326+
const appB = createApp()
327+
.use(i18nVue)
328+
.mount('#app-2');
329+
330+
// elsewhere
331+
import { trans } from 'laravel-vue-i18n'
332+
333+
trans('Welcome!') // will output "Bem-vindo!"
334+
```
335+
336+
**Non-shared usage** - each Vue app will have its own `I18n` instance & currently active language.
337+
```js
338+
import { i18nVue } from 'laravel-vue-i18n'
339+
340+
const appA = createApp()
341+
.use(i18nVue, {
342+
lang: 'es'
343+
shared: false, // don't use the shared instance
344+
})
345+
.mount('#app-1');
346+
347+
const appB = createApp()
348+
.use(i18nVue, {
349+
lang: 'pt'
350+
shared: false, // don't use the shared instance
351+
})
352+
.mount('#app-2');
353+
```
354+
355+
### Accessing the shared instance
356+
It's possible to access the shared instance via code as well:
357+
358+
```js
359+
import { I18n } from 'laravel-vue-i18n'
360+
361+
I18n.getSharedInstance()
362+
```
363+
### Caveats
364+
365+
It is possible to import a translation function before installing the `i18nVue` plugin. When calling the translation function, ie `trans()`, and the plugin has not been installed, a shared `I18n` instance will be created with default options. This ensures that it's possible to import and call these functions without any fatal errors. However, this may yield undesired results. Therefore, it is advisable to never call any translation methods before the plugin is installed.

0 commit comments

Comments
 (0)