Skip to content
On this page

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.

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.

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.

Configuration

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

php
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:

ts
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:

ts
import { initializeHybridly } from 'virtual:hybridly/config'
import i18n from './i18n' 

initializeHybridly({
	enhanceVue: (vue) => vue 
		.use(i18n)
})