@sydgren/vite-plugin-laravel-translations

Vite Plugin - Laravel Translations

@sydgren/vite-plugin-laravel-translations is a Vite 8 plugin that retrieves Laravel Framework translation files and makes them available as a global variable for use with any other i18n framework plugin such as vue-i18n for Vue or react-i18next for React.

NOTE: This plugin uses Vite specific hooks (config & handleHotUpdate) to make the translations globally available and cannot be used as a rollup plugin.

Requires Vite 8+ and Node 24+. This is a maintained, Vite 8-only fork of the (abandoned) dcodegroup/vite-plugin-laravel-translations.

Installation

With pnpm:

pnpm i @sydgren/vite-plugin-laravel-translations

with npm:

npm i @sydgren/vite-plugin-laravel-translations

or with yarn:

yarn add @sydgren/vite-plugin-laravel-translations

Setup with Vite

import laravelTranslations from '@sydgren/vite-plugin-laravel-translations';

export default defineConfig({
	...
	plugins: [
		laravelTranslations({
			// # Include JSON translation files in addition to PHP
			includeJson: false,
			// # Namespace to nest translations under (string | false)
			namespace: false,
		}),
	],
});

Usage in Vue 3.x.x

For more information on usage with vue-i18n refer to https://vue-i18n.intlify.dev/guide/#javascript.

// app.js
// 1. Create i18n instance with options
const i18n = VueI18n.createI18n({
  locale: 'ja', // set locale
  fallbackLocale: 'en', // set fallback locale
  messages: import.meta.env.VITE_LARAVEL_TRANSLATIONS, // set locale messages
  // If you need to specify other options, you can set other options
  // ...
})


// 2. Create a vue root instance
const app = Vue.createApp({
  // set something options
  // ...
})

// 3. Install i18n instance to make the whole app i18n-aware
app.use(i18n)

// 4. Mount
app.mount('#app')

// Now the app has started!
...

Usage in React

This example uses i18nnext and react-i18next packages. Refer to https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb#getting-started for extended example.

Vite Config

import laravelTranslations from '@sydgren/vite-plugin-laravel-translations';

export default defineConfig({
	...
	plugins: [
		laravelTranslations({
			// # Declare: namespace
			namespace: 'translation',
		}),
	],
});

Javascript

// i18n.js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: true,
    fallbackLng: "en",
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    resources: import.meta.env.VITE_LARAVEL_TRANSLATIONS,
  });

export default i18n;

// index.js (React >= 18.0.0)
import React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";

import "./i18n";

const root = createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Usage in JavaScript/NodeJS

const translations = import.meta.env.VITE_LARAVEL_TRANSLATIONS;
console.log(translations);
...

Custom language directory

By default, the plugin will look for language files in the resources/lang directory if the laravel version is minor than v9, otherwise it will look for language files in the lang directory. You can specify a custom directory by passing the absoluteLanguageDirectory option to the plugin.

...
plugins: [
    laravelTranslations({
        absoluteLanguageDirectory: 'custom/path/to/lang',
    }),
],

Interpolation

Laravel placeholders use a :name syntax (e.g. Welcome :name). If your i18n framework expects a different syntax, pass an interpolation option to rewrite them at build time:

...
plugins: [
    laravelTranslations({
        // Rewrites `:name` to `{name}` (e.g. for vue-i18n)
        interpolation: { prefix: '{', suffix: '}' },
    }),
],

Only string values are rewritten, and a placeholder must start with a letter or underscore — so numbers, booleans and time-like values such as 12:30 are left untouched.

Hot-Module Replacement (HMR)

When running vite with the dev server running, changes to .php files (and .json files when includeJson is enabled) inside the resolved language directory restart the vite dev server so the translations are rebuilt. This follows absoluteLanguageDirectory when you set one.

Development

Requires Node 24+.

pnpm install
pnpm run lint    # oxlint
pnpm run format  # prettier
pnpm run typecheck # tsc --noEmit
pnpm run test    # vitest
pnpm run build   # vite (Rolldown) -> dist/

Changes

For any version and breaking changes please see CHANGELOG.md.