![\"GitHub](\"https://github.com/xiCO2k/laravel-vue-i18n/actions/workflows/tests.yaml/badge.svg\"){kind=icon}
\n ![\"License\"](\"https://img.shields.io/npm/l/laravel-vue-i18n.svg?sanitize=true\")
\n ![\"Version\"](\"https://img.shields.io/npm/v/laravel-vue-i18n.svg\")
\n ![\"Total](\"https://img.shields.io/npm/dt/laravel-vue-i18n.svg\")
\n\n \n \n \n \n
\n laravel-vue-i18n is a Vue3 plugin that allows to connect your Laravel Framework translation\n files with Vue. It uses the same logic used on Laravel Localization.\n
\n\n## Installation\n\nWith [npm](https://www.npmjs.com):\n```sh\nnpm i laravel-vue-i18n\n```\n\nor with [yarn](https://yarnpkg.com):\n```sh\nyarn add laravel-vue-i18n\n```\n\n## Setup\n\n> If you want to see a screencast on how to setup check out this video: [How to use Laravel Vue i18n plugin](https://www.youtube.com/watch?v=ONRo8-i5Qsk).\n\n### With Vite\n\n```js\nimport { createApp } from 'vue'\nimport { i18nVue } from 'laravel-vue-i18n'\n\ncreateApp()\n .use(i18nVue, {\n resolve: async lang => {\n const langs = import.meta.glob('../../lang/*.json');\n return await langs[`../../lang/${lang}.json`]();\n }\n })\n .mount('#app');\n```\n\n#### SSR (Server Side Rendering)\n\nFor Server Side Rendering the resolve method should not receive a `Promise` and instead take advantage of the `eager` param like this:\n\n```js\n.use(i18nVue, {\n lang: 'pt',\n resolve: lang => {\n const langs = import.meta.glob('../../lang/*.json', { eager: true });\n return langs[`../../lang/${lang}.json`].default;\n },\n})\n```\n\n#### PHP Translations Available on Vue\n\nIn order to load `php` translations, you can use this `Vite` plugin.\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\nimport vue from '@vitejs/plugin-vue';\nimport i18n from 'laravel-vue-i18n/vite';\n\nexport default defineConfig({\n plugins: [\n laravel([\n 'resources/css/app.css',\n 'resources/js/app.js',\n ]),\n vue(),\n\n // Laravel >= 9\n i18n(),\n\n // Laravel < 9, since the lang folder is inside the resources folder\n // you will need to pass as parameter:\n // i18n('resources/lang'),\n ],\n});\n```\n\n#### Vite plugin options\n\nRelative translation paths are resolved from Vite's `root` (the project directory by default). Absolute paths are also supported. Nested PHP translations and configurations containing only additional translation paths are supported.\n\nDuring development, editing, adding, or deleting a PHP translation in any configured directory regenerates the JSON files and reloads the page. Generated files are cleaned up when the server or build closes; files that existed before generation are restored. Parallel builds sharing an output directory should use the same translation configuration. Separate processes should run client and SSR builds sequentially.\n\nThe PHP loader extracts static strings and arrays. It skips unsupported values such as closures, function calls, and variable expressions; it does not execute PHP. Other files inside locale directories are ignored.\n\nIn addition to that, you can use this `Vite` plugin with additional paths to load from, this is usefull when you are using a package that let's you override your translations, or in case you are getting your application's lang files from different paths. \n\nNote that if one key found in two paths, priority will be given to the last given path between these two (In this example translation key will be loaded from `public/locales`)\n\n```js\n// vite.config.js\nimport i18n from 'laravel-vue-i18n/vite';\n\nexport default defineConfig({\n plugins: [\n laravel([\n 'resources/css/app.css',\n 'resources/js/app.js',\n ]),\n vue(),\n\n i18n({\n // you can also change your langPath here\n // langPath: 'locales' \n additionalLangPaths: [\n 'public/locales' // Load translations from this path too! \n ]\n }),\n ],\n});\n```\n\n> During the `npm run dev` execution time, the plugin will create some files like this `php_{lang}.json` on your lang folder.\n> And to avoid that to be commited to your code base, I suggest to your `.gitignore` this like:\n\n```bash\nlang/php_*.json\n```\n\n#### With Vite+\n\nFollow the [Vite+ migration guide](https://viteplus.dev/guide/migrate) to install Vite+ and configure its Vite dependency alias. Then use the existing plugin in your config:\n\n```js\nimport { defineConfig } from 'vite-plus';\nimport laravel from 'laravel-vite-plugin';\nimport vue from '@vitejs/plugin-vue';\nimport i18n from 'laravel-vue-i18n/vite';\n\nexport default defineConfig({\n plugins: [\n laravel({ input: ['resources/js/app.js'] }),\n vue(),\n i18n(),\n ],\n});\n```\n\nRun `vp dev` or `vp build`. The Vue setup and translation resolver shown above stay the same. Vite+ is optional; this package does not install it.\n\n### With Webpack / Laravel Mix\n\n```js\nimport { createApp } from 'vue'\nimport { i18nVue } from 'laravel-vue-i18n'\n\ncreateApp()\n .use(i18nVue, {\n resolve: lang => import(`../../lang/${lang}.json`),\n })\n .mount('#app');\n```\n\n#### SSR (Server Side Rendering)\n\nFor Server Side Rendering the resolve method should receive a `require` instead of a `Promise`:\n\n```js\n.use(i18nVue, {\n lang: 'pt',\n resolve: lang => require(`../../lang/${lang}.json`),\n})\n````\n\n#### PHP Translations Available on Vue\n\nIn order to load `php` translations, you can use this `Mix` plugin.\n\n```js\nconst mix = require('laravel-mix');\nrequire('laravel-vue-i18n/mix');\n\n// Laravel >= 9\nmix.i18n();\n\n// Laravel < 9, since the lang folder is inside the resources folder\n// you will need to pass as parameter:\n\n// mix.i18n('resources/lang');\n```\n\n### Usage\n\n```html\n\n