PHPackages                             dev-alysonh/inertia-vue-translate - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Localization & i18n](/categories/localization)
4. /
5. dev-alysonh/inertia-vue-translate

ActiveLibrary[Localization & i18n](/categories/localization)

dev-alysonh/inertia-vue-translate
=================================

A simple package that enables translation in your inertia and vue js application, similar to what we use in blade files.

v1.0.6(1y ago)17MITPHPPHP ^8.0

Since Nov 27Pushed 1y ago1 watchersCompare

[ Source](https://github.com/DevAlysonh/inertia-vue-translate)[ Packagist](https://packagist.org/packages/dev-alysonh/inertia-vue-translate)[ RSS](/packages/dev-alysonh-inertia-vue-translate/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (4)Versions (8)Used By (0)

Introduction:
=============

[](#introduction)

This is a simple package that defines a mixin in your Laravel application with Inertia and Vue.js to handle translations similarly to how it's done in `blade.php` files. It becomes particularly useful when working with Vue.js, as Inertia.js does not natively provide a way to manage translations when needed.

I developed this package to make my life easier and avoid having to manually implement this mixin in every project. I hope it will be helpful for you as well.

Set Up:
=======

[](#set-up)

Setting up this package is very simple. All you need to do is follow these steps:

- Install the package:

```
composer require dev-alysonh/inertia-vue-translate

```

- Run the Artisan command:

```
php artisan translations:setup

```

- Import the new mixin into your app.js configuration file, like this:

```
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { translations } from './mixins/translations'; // import the mixin

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .mixin(translations) // share the mixin globally
      .use(plugin)
      .mount(el)
  },
})

```

- Register the ShareTranslations Middleware in your bootstrap/app.php file:

```
// Laravel ^11
// If you are using Laravel version 10 or earlier, you need to register the middleware in the Kernel.php file.