PHPackages                             dialect/transedit - 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. [Database & ORM](/categories/database)
4. /
5. dialect/transedit

ActiveLibrary[Database & ORM](/categories/database)

dialect/transedit
=================

Translations for Laravel with inline edit support

v1.1.1(1y ago)45.8kMITPHPCI failing

Since Mar 13Pushed 1y ago2 watchersCompare

[ Source](https://github.com/forss-it/transedit)[ Packagist](https://packagist.org/packages/dialect/transedit)[ Docs](https://github.com/dialect-katrineholm/transedit)[ RSS](/packages/dialect-transedit/feed)WikiDiscussions master Synced 2d ago

READMEChangelog (10)Dependencies (1)Versions (37)Used By (0)

TransEdit
=========

[](#transedit)

**TransEdit** is a Laravel plugin designed to store and manage localization strings in a database with built-in caching. It offers a flexible and interactive way to handle language translations, including an optional *edit mode*, which allows users to edit translations directly in the browser by simply double-clicking any highlighted text.

Table of Contents
-----------------

[](#table-of-contents)

1. [Features](#features)
2. [Installation](#installation)
3. [Configuration](#configuration)
4. [Usage](#usage)
    - [Using Keys](#using-keys)
    - [Using Phrases](#using-phrases)
5. [Artisan Commands](#artisan-commands)
    - [Add Existing Translations](#1-add-existing-translations)
    - [Add Missing Translations (with Migration Option)](#2-add-missing-translations-with-migration-option)
6. [Examples](#examples)
7. [Publishing and Assets](#publishing-and-assets)

---

Features
--------

[](#features)

- **Database-driven localizations** – Store translations in the database instead of the traditional file-based approach.
- **Built-in cache support** – Improve performance by caching translations.
- **Browser-based editing** – Enable an edit mode that allows users to directly modify translations by double-clicking them.
- **Laravel integration** – Seamless integration with Laravel’s localization features.
- **Vue and Inertia integration** – Easily incorporate TransEdit with Vue or Inertia-based applications.

---

Installation
------------

[](#installation)

1. **Require the package via Composer:**

    ```
    composer require dialect/transedit
    ```
2. **Publish the configuration, assets, and migrations:**

    ```
    php artisan vendor:publish --provider="Dialect\TransEdit\TransEditServiceProvider"
    ```

    This command will publish:

    - Config file to `config/transedit.php`
    - Assets (JavaScript and Vue components) to your `resources` folder
    - Migrations to `database/migrations`
3. **Add the Vue component**
    If you’re using Laravel Mix, add the TransEdit Vue component to your main JavaScript file (commonly `resources/assets/js/app.js` or `resources/js/app.js`) and recompile:

    ```
    Vue.component('transedit', require('./components/transedit/TransEdit.vue'));
    ```

    Then, run:

    ```
    npm run dev
    ```

    or

    ```
    npm run prod
    ```

    according to your build process.
4. **Run the database migrations:**

    ```
    php artisan migrate
    ```

    This will create the necessary tables for storing translations.
5. **Enable TransEdit in your front-end**

    - Include the TransEdit script in your layout (e.g., `resources/views/layout.blade.php`):

        ```

        ```
    - If you are using Vue, register TransEdit as a global property in your `app.js` (or equivalent):

        ```
        Vue.prototype.transEdit = window.transEdit;
        ```
    - If you are using **Inertia**, attach `transEdit` in your Inertia app setup, like so:

        ```
        import { createInertiaApp } from '@inertiajs/inertia-vue3';
        import { createApp, h } from 'vue';

        createInertiaApp({
          title: (title) => `${title} - ${appName}`,
          resolve: (name) =>
            resolvePageComponent(
              `./Pages/${name}.vue`,
              import.meta.glob('./Pages/**/*.vue'),
            ),
          setup({ el, App, props, plugin }) {
            const theApp = createApp({ render: () => h(App, props) });

            // Make transEdit available globally
            theApp.config.globalProperties.transEdit = window.transEdit;

            return theApp
              .use(plugin)
              .mount(el);
          },
          progress: {
            color: '#4B5563',
          },
        });
        ```

That’s it! TransEdit is now installed and ready for use in your Laravel project.

---

Configuration
-------------

[](#configuration)

After running the publish command, a configuration file will be placed at `config/transedit.php`. This file allows you to customize how TransEdit handles caching, database settings, default locale behavior, and more. Adjust these settings as desired to suit your application’s needs.

---

Usage
-----

[](#usage)

### Using Keys

[](#using-keys)

TransEdit offers convenient helper methods to set and retrieve translations using **keys**.

1. **Setting a translation key and value**

    ```
    transEdit()->setKey('greeting', 'Hello');
    ```
2. **Retrieving a translation by key**

    ```
    $value = transEdit()->getKey('greeting'); // returns "Hello"
    ```
3. **Helper function shorthand**

    ```
    // Set a key
    transEdit('example.key', 'Some value', 'locale'); // 'locale' is optional

    // Get a key
    transEdit('example.key'); // returns "Some value"
    ```
4. **Working with variables**

    ```
    // Positional variables
    transEdit('You have $1 months left on your subscription of $2.', ['12', 'Netflix']);

    // Named variables
    transEdit('You have $MONTHS months left on your subscription of $SERVICE.', [
        'MONTHS' => '12',
        'SERVICE' => 'Netflix'
    ]);
    ```
5. **Enable/Disable edit mode**

    ```
    transEdit()->enableEditMode();  // Double-click on highlighted text to edit
    transEdit()->disableEditMode(); // Turn off in-browser editing
    ```

    > Note: Locale settings and edit-mode are session-based, meaning they apply to individual user sessions.

### Using Phrases

[](#using-phrases)

TransEdit also supports using **full phrases** or sentences directly in place of a key.

1. **Setting a phrase**

    ```
    // If the phrase does not exist in the database, TransEdit will create it
    transEdit('Welcome to our website!');

    // Optionally, you can include a locale
    transEdit('Welcome to our website!', null, 'en');
    ```
2. **Retrieving a phrase**

    ```
    echo transEdit('Welcome to our website!');
    ```
3. **Using variables in a phrase**

    ```
    transEdit('Hello, $NAME! Thank you for joining us.', ['NAME' => 'Alice']);
    ```
4. **Editing phrases in-browser**

    ```
    transEdit()->enableEditMode();
    ```

    Anywhere you have `transEdit('A new phrase here')` in your Blade view, you can double-click and edit it directly in the browser (if your Vue/JS setup is correct).
5. **Why use phrases?**

    - **Speed & Convenience**: No need to manage separate key strings or maintain complex nested arrays.
    - **Automatic Handling**: TransEdit manages insertion, updates, and caching for these phrases.
    - **Iterative Development**: Wrap new text in `transEdit('...')`. Later, if you want more structure, you can easily rename or reorganize these translations.

---

Artisan Commands
----------------

[](#artisan-commands)

### 1. Add Existing Translations

[](#1-add-existing-translations)

This command scans your `lang` folder for Laravel language files and imports them into the TransEdit database:

```
php artisan transedit:add-lang-files-to-database
```

For example, if you have a file `lang/sv/article.php` containing:

```