### Install with npm
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Installs the laravel-vue-i18n package using npm. This is the primary method for adding the plugin to your project.
```sh
npm i laravel-vue-i18n
```
--------------------------------
### Install with yarn
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Installs the laravel-vue-i18n package using yarn. This is an alternative method for adding the plugin to your project.
```sh
yarn add laravel-vue-i18n
```
--------------------------------
### Usage Example
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Demonstrates how to use the translation functions within a Vue template. It shows how to translate strings and use pluralization with dynamic values.
```vue
```
--------------------------------
### Setup with Vite (SSR)
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Configures the Vue application for Server Side Rendering (SSR) with Vite. It uses the `eager: true` option for `import.meta.glob` to load translations synchronously, which is required for SSR.
```javascript
.use(i18nVue, {
lang: 'pt',
resolve: lang => {
const langs = import.meta.glob('../../lang/*.json', { eager: true });
return langs[`../../lang/${lang}.json`].default;
},
})
```
--------------------------------
### Setup with Vite
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Configures the Vue application to use the laravel-vue-i18n plugin with Vite. It specifies a dynamic import function for resolving translation files based on the language code.
```javascript
import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'
createApp()
.use(i18nVue, {
resolve: async lang => {
const langs = import.meta.glob('../../lang/*.json');
return await langs[`../../lang/${lang}.json`]();
}
})
.mount('#app');
```
--------------------------------
### Setup with Webpack / Laravel Mix
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Configures the Vue application to use the laravel-vue-i18n plugin with Webpack/Laravel Mix. It specifies a require function for resolving translation files.
```javascript
import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'
createApp()
.use(i18nVue, {
resolve: lang => import(`../../lang/${lang}.json`),
})
.mount('#app');
```
--------------------------------
### Setup with Webpack / Laravel Mix (SSR)
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Configures the Vue application for Server Side Rendering (SSR) with Webpack/Laravel Mix. It uses `require` instead of a Promise for resolving translation files, which is necessary for SSR environments.
```javascript
.use(i18nVue, {
lang: 'pt',
resolve: lang => require(`../../lang/${lang}.json`),
})
```
--------------------------------
### Configure Plugin Options
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Demonstrates how to configure the laravel-vue-i18n plugin during application setup. It shows the use of `lang` and `resolve` options, where `resolve` specifies how language files are imported.
```JavaScript
import { createApp } from 'vue';
import i18nVue from 'laravel-vue-i18n';
createApp().use(i18nVue, {
lang: 'pt',
resolve: lang => import(`../../lang/${lang}.json`)
});
```
--------------------------------
### Get Active Language
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
The `getActiveLanguage()` method returns the ISO language code of the language currently in use by the application. This can be useful for conditional rendering or logging.
```APIDOC
getActiveLanguage(): string
Retrieves the currently active language code.
Returns:
The string code of the active language (e.g., 'en', 'pt').
Example:
import { getActiveLanguage } from 'laravel-vue-i18n';
const currentLang = getActiveLanguage(); // Returns 'en' or 'pt' etc.
```
--------------------------------
### Create and Use Multiple I18n Instances
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Demonstrates creating separate I18n class instances, each configured with a different active language and a resolver function. This allows for distinct translation contexts within an application.
```js
import { I18n } from 'laravel-vue-i18n'
const resolver = lang => import(`./fixtures/lang/${lang}.json`)
const i18nEn = new I18n({
lang: 'en',
resolve: resolver
})
const i18nPt = new I18n({
lang: 'pt',
resolve: resolver
})
i18nEn.trans('Welcome!') // will output "Welcome!"
i18nPt.trans('Welcome!') // will output "Bem-vindo!"
```
--------------------------------
### Use i18nVue Plugin with Shared Instance (Default)
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Illustrates the default behavior of the i18nVue plugin, where a single shared I18n instance is used across all Vue app instances. This ensures consistent language handling when not explicitly configured otherwise.
```js
import { i18nVue } from 'laravel-vue-i18n'
import { createApp } from 'vue'
const appA = createApp()
.use(i18nVue, { lang: 'pt' })
.mount('#app-1');
const appB = createApp()
.use(i18nVue)
.mount('#app-2');
// elsewhere
import { trans } from 'laravel-vue-i18n'
trans('Welcome!') // will output "Bem-vindo!"
```
--------------------------------
### Ignore Generated Files
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Suggests adding a pattern to the .gitignore file to prevent automatically generated PHP translation JSON files from being committed to the repository.
```bash
lang/php_*.json
```
--------------------------------
### Use i18nVue Plugin with Non-Shared Instance
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Shows how to configure the i18nVue plugin with `shared: false` to enable each Vue app instance to have its own independent I18n instance and active language.
```js
import { i18nVue } from 'laravel-vue-i18n'
import { createApp } from 'vue'
const appA = createApp()
.use(i18nVue, {
lang: 'es',
shared: false, // don't use the shared instance
})
.mount('#app-1');
const appB = createApp()
.use(i18nVue, {
lang: 'pt',
shared: false, // don't use the shared instance
})
.mount('#app-2');
```
--------------------------------
### Load Language Asynchronously
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
The `loadLanguageAsync()` method allows changing the application's language at runtime. This is useful for dynamic language switching based on user actions or other events.
```APIDOC
loadLanguageAsync(lang: string): Promise
Loads a language file asynchronously and sets it as the active language.
Parameters:
lang: The language code (e.g., 'pt', 'en') to load.
Returns:
A Promise that resolves when the language is loaded.
Example:
import { loadLanguageAsync } from 'laravel-vue-i18n';
// In a Vue component method or event handler:
// loadLanguageAsync('pt');
```
--------------------------------
### Reactive Plural Translation with wTransChoice()
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
The `wTransChoice()` method offers reactive pluralization, returning an object that updates with language or file changes. It's useful for pluralized messages that need to be watched.
```APIDOC
wTransChoice(message: string, count: number, replacements: {}): object
Provides a reactive translated value with pluralization support.
Parameters:
message: The message key or string with pluralization rules.
count: The number to determine which plural form to use.
replacements: An object containing key-value pairs for message placeholders.
Returns:
A reactive object with the translated pluralized value.
Example:
// lang/pt.json
// {
// "There is one apple|There are many apples": "Existe uma maça|Existe muitas maças",
// "{0} There are none|[1,19] There are some|[20,*] There are many": "Não tem|Tem algumas|Tem muitas"
// }
import { wTransChoice } from 'laravel-vue-i18n';
setup() {
return {
oneAppleLabel: wTransChoice('There is one apple|There are many apples', 1),
multipleApplesLabel: wTransChoice('{0} There are none|[1,19] There are some|[20,*] There are many', 19)
}
}
//
//
{{ oneAppleLabel }}
//
Existe uma maça
//
{{ multipleApplesLabel }}
//
Tem algumas
//
```
--------------------------------
### Reactive Translation with wTrans()
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
The `wTrans()` method provides a reactive translation, returning an object that automatically updates when language changes or files are loaded. It's ideal for values that need to be watched.
```APIDOC
wTrans(message: string, replacements: {}): object
Provides a reactive translated value.
Parameters:
message: The message key or string to translate.
replacements: An object containing key-value pairs for message placeholders.
Returns:
A reactive object with the translated value.
Example:
// lang/pt.json
// {
// "Welcome!": "Bem-vindo!",
// "Welcome, :name!": "Bem-vindo, :name!"
// }
import { wTrans } from 'laravel-vue-i18n';
setup() {
return {
welcomeLabel: wTrans('Welcome!'),
welcomeFrancisco: wTrans('Welcome, :name!', { name: 'Francisco' })
}
}
//
//
{{ welcomeLabel }}
//
Bem-vindo!
//
{{ welcomeFrancisco }}
//
Bem-vindo, Francisco!
//
```
--------------------------------
### Vite Plugin Options
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Configures the laravel-vue-i18n Vite plugin with additional paths to load translation files from. This is useful for overriding translations or loading them from different locations, with priority given to the last specified path.
```javascript
// vite.config.js
import i18n from 'laravel-vue-i18n/vite';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css'
'resources/js/app.js',
]),
vue(),
i18n({
// you can also change your langPath here
// langPath: 'locales'
additionalLangPaths: [
'public/locales' // Load translations from this path too!
]
}),
],
});
```
--------------------------------
### Access Shared I18n Instance Programmatically
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Provides the method to access the globally shared I18n instance directly from code. This is useful for interacting with the shared translation logic outside of Vue component contexts.
```js
import { I18n } from 'laravel-vue-i18n'
I18n.getSharedInstance()
```
--------------------------------
### Translate Plural Messages with transChoice()
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
The `transChoice()` method handles pluralization based on a count. It supports various pluralization rules and formats, including simple pipes and complex interval definitions.
```APIDOC
transChoice(message: string, count: number, replacements: {}): string
Translates a message string based on a count for pluralization.
Parameters:
message: The message key or string with pluralization rules.
count: The number to determine which plural form to use.
replacements: An object containing key-value pairs for message placeholders.
Returns:
The translated string with appropriate pluralization.
Example:
// lang/pt.json
// {
// "There is one apple|There are many apples": "Existe uma maça|Existe muitas maças",
// "{0} There are none|[1,19] There are some|[20,*] There are many": "Não tem|Tem algumas|Tem muitas",
// "{1} :count minute ago|[2,*] :count minutes ago": "{1} há :count minuto|[2,*] há :count minutos"
// }
import { transChoice } from 'laravel-vue-i18n';
transChoice('There is one apple|There are many apples', 1); // Existe uma maça
transChoice('{0} There are none|[1,19] There are some|[20,*] There are many', 19); // Tem algumas
transChoice('{1} :count minute ago|[2,*] :count minutes ago', 10); // Há 10 minutos.
```
--------------------------------
### Mix Plugin for PHP Translations
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Integrates the laravel-vue-i18n Mix plugin to load PHP translations. This configuration is for Laravel versions 9 and above. For older versions, a path argument might be needed.
```javascript
const mix = require('laravel-mix');
require('laravel-vue-i18n/mix');
// Laravel >= 9
mix.i18n();
// Laravel < 9, since the lang folder is inside the resources folder
// you will need to pass as parameter:
// mix.i18n('resources/lang');
```
--------------------------------
### Vite Plugin for PHP Translations
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
Integrates the laravel-vue-i18n Vite plugin to load PHP translations. This configuration is for Laravel versions 9 and above. For older versions, a path argument might be needed.
```javascript
// vite.config.js
import i18n from 'laravel-vue-i18n/vite';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css'
'resources/js/app.js',
]),
vue(),
// Laravel >= 9
i18n(),
// Laravel < 9, since the lang folder is inside the resources folder
// you will need to pass as parameter:
// i18n('resources/lang'),
],
});
```
--------------------------------
### Check if Language is Loaded
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
The `isLoaded()` method checks whether a specific language or the currently active language has been loaded into the application. It returns a boolean value.
```APIDOC
isLoaded(lang?: string): boolean
Checks if a language is loaded.
Parameters:
lang: Optional. The language code to check. If not provided, checks the currently active language.
Returns:
True if the language is loaded, false otherwise.
Example:
import { isLoaded } from 'laravel-vue-i18n';
const isCurrentLoaded = isLoaded(); // true or false
const isFrenchLoaded = isLoaded('fr'); // true or false
```
--------------------------------
### Translate Message with trans()
Source: https://github.com/xico2k/laravel-vue-i18n/blob/main/README.md
The `trans()` method translates a given message string, supporting simple text and parameterized replacements. It takes the message key and an optional object for replacements.
```APIDOC
trans(message: string, replacements: {}): string
Translates a message string.
Parameters:
message: The message key or string to translate.
replacements: An object containing key-value pairs for message placeholders.
Returns:
The translated string.
Example:
// lang/pt.json
// {
// "Welcome!": "Bem-vindo!",
// "Welcome, :name!": "Bem-vindo, :name!"
// }
import { trans } from 'laravel-vue-i18n';
trans('Welcome!'); // Bem-vindo!
trans('Welcome, :name!', { name: 'Francisco' }) // Bem-vindo Francisco!
trans('Welcome, :NAME!', { name: 'Francisco' }) // Bem-vindo FRANCISCO!
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.