How to handle localization multi-language support in Laravel and vue js



Image not found!!

Handling localization (multi-language support) in Laravel and Vue.js involves a combination of server-side and client-side approaches. Laravel provides robust localization features, while Vue.js can handle client-side translations. Here's a step-by-step guide:

Laravel Localization:

  1. Configure Laravel for Localization:

    Open the config/app.php file and set your default locale:

    php
    'locale' => 'en',

    Create language files in the resources/lang directory. For example, you might create en for English and es for Spanish.

  2. Create Language Files:

    Inside the resources/lang directory, create files like en.php and es.php. Define your translations in these files:

    php
    // resources/lang/en.php
return [
    'welcome' => 'Welcome to our website',
];
    php
    // resources/lang/es.php
return [
    'welcome' => 'Bienvenido a nuestro sitio web',
];

  3. Use the trans Helper in Blade Views:

    In your Blade views, use the trans helper to display translated strings:

    html
    <p>{{ trans('messages.welcome') }}</p>

Vue.js Localization:

  1. Install Vue-i18n:

    Use npm or yarn to install Vue-i18n:

    bash
    npm install vue-i18n

  2. Create Vue-i18n Instance:

    Create a new file, for example, i18n.js:

    javascript
    // i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const messages = {
    en: {
        welcome: 'Welcome to our website',
    },
    es: {
        welcome: 'Bienvenido a nuestro sitio web',
    },
};

const i18n = new VueI18n({
    locale: 'en',
    messages,
});

export default i18n;

  3. Integrate Vue-i18n in your Vue Components:

    In your main Vue component (e.g., app.js), import and use the i18n instance:

    javascript
    // app.js
import Vue from 'vue';
import App from './App.vue';
import i18n from './i18n';

new Vue({
    render: h => h(App),
    i18n,
}).$mount('#app');

    Now, you can use the $t method in your Vue components to translate strings:

    html
    <template>
    <div>
        <p>{{ $t('welcome') }}</p>
    </div>
</template>

<script>
export default {
    // Component logic
};
</script>

  4. Switching Locales Dynamically:

    You can add functionality to switch between languages dynamically by updating the locale property in your Vue instance:

    javascript
    // Example function to switch locale
methods: {
    switchLocale(locale) {
        this.$i18n.locale = locale;
    },
},

    Use a button or any other UI element to trigger the switchLocale function.

Now, with both Laravel and Vue.js set up for localization, your application can provide a seamless experience for users in different languages. Ensure that your routes, validation messages, and other aspects are also appropriately localized in Laravel.

Category List