Internationalization
Overview
While Hybridly does not have much to do with internationalization, it provides an artisan command for converting Laravel lang files to JSON files that can be consumed by vue-18n
.
Note that this feature will move to a separated package at some point.
Internationalization keys
This article is a good resource regarding internationalization key management.
Usage with vue-i18n
The translation files generated by Hybridly are compatible with vue-i18n
, which is the de-facto solution for translating Vue applications.
Its setup is rather trivial, but to globally benefit from TypeScript support, it needs to be configured by extending the DefineLocaleMessage
interface.
The following file demonstrates how to do this:
import { createI18n } from 'vue-i18n'
import messages from '#/locales.json'
export type MessageSchema = typeof messages['en']
declare module 'vue-i18n' {
export interface DefineLocaleMessage extends MessageSchema {}
}
const i18n = createI18n<[MessageSchema], 'en' | 'fr'>({
locale: 'en',
messages,
})
export default i18n
This file can then be imported and registered as a Vue plugin:
import { initializeHybridly } from 'virtual:hybridly/config'
import i18n from './i18n'
initializeHybridly({
enhanceVue: (vue) => vue
.use(i18n)
})
Configuration
config/hybridly.php
allows for a few configuration options.
return [
// ...
'i18n' => [
'file_name_template' => '{locale}.json',
'file_name' => 'locales.json',
]
];
- file_name_template: name template for the the individual locale files.
- file_name: name of the file that contain all translations.
Manual command usage
Running php artisan hybridly:i18n
will create a .hybridly/locales.json
file containing all locales.
Optionally, it is possible to extract each locale in its own file by using the --locales
option.
Automatic re-generation
Note that, by default, translation files are automatically be re-generated when a change to a lang file is made. This is done by vite-plugin-run
, which is automatically incuded.