CODEWITHSUNDEEP
laravelvue.jsvuejs2
mafortis
mafortis

Reputation: 7138

Change laravel html lang variable

I have laravel/VueJs app which is supporting multiple language but there is one issue, when I change language on VueJs html Lang tag will not change.

Code

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <title>{{ config('app.name', 'Laravel') }}</title>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
        <style>body{ margin-bottom: 60px !important;}</style>
    </head>

    <body style="overflow:hidden;">
        <noscript>
        <strong>We're sorry but Xtreme Vuesax doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <script src="{{ asset('js/app.js') }}"></script>
        <script>
            window.default_locale = "{{ config('app.locale') }}";
            window.fallback_locale = "{{ config('app.fallback_locale') }}";
        </script>
    </body>
</html>

app.js

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import localesData from './components/Layouts/localesData'
Vue.component('locale-dropdown', require('./components/Layouts/locales').default);

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

const app = new Vue({
    el: '#app',
    router,
    store,
    i18n,
    render: h => h(App)
});

Explanation

I need this line <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> to be change to selected language in VueJs.

any idea how to change that?

Upvotes: 0

Views: 1013

Answers (1)

Donkarnash
Donkarnash

Reputation: 12845

From within your Vue component 'locale-dropdown', when the user selects a locale, you can

//say the data property on your component which holds the selected locale is called locale
let h = document.querySelector('html');
h.setAttribute('lang', this.locale);

Upvotes: 4

Related Questions