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.

Command usage ​

Running php artisan hybridly:i18n will create a resources/i18n/locales.json file containing all locales.

Optionally, it is possible to extract each locale in its own file by using the --locales option. When using that option, adding --clean will empty the locales directory before extraction.

Configuration ​

config/hybridly.php allows for a few configuration options.

return [
  // ...
  'i18n' => [
    'lang_path' => base_path('lang'), 
    'locales_path' => resource_path('i18n/locales'),
    'file_name_template' => '{locale}.json',
    'file_name' => 'locales.json',
  ]
];

• lang_path: directory in which the lang files that need to be converted are defined.
• locales_path: directory in which translation files will be written.
• file_name_template: name template for the the individual locale files.
• file_name: name of the file that contain all translations.

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)
})