You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
oneAppleLabel: wTransChoice('There is one apple|There are many apples', 1),
245
246
multipleApplesLabel: wTransChoice('{0} There are none|[1,19] There are some|[20,*] There are many', 19)
246
-
}
247
+
}
247
248
}
248
249
249
250
<template>
@@ -287,3 +288,78 @@ import { isLoaded } from 'laravel-vue-i18n';
287
288
const loaded = isLoaded(); // true
288
289
const loaded = isLoaded('fr'); // false
289
290
```
291
+
292
+
## Using multiple instances
293
+
294
+
Under the hood, the Vue plugin is using a `I18n`classwhich 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`classand 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