Laravel-Vue ikilisinde dil dosyası problemi

Laravel-Vue ikilisini ne kadar övsem az. O nedenle bu kısmı es geçip yaşadığım dil sorununu nasıl aştığımı anlatmak istiyorum.

Laravel’de blade template kullananlar çok dilli bir projeyle ilgileniyorsa lang() veya daha sade haliyle __() fonksiyonunu biliyordur. Kısaca anlatalım. resources/lang klasörü altında “tr”, “en” gibi dil klasörleri oluşturup bunların içine ayrı ayrı kullanabileceğimiz dil dosyaları oluşturuyoruz. Örneğin resources/lang/en/menu.php dosyasının içeriği şu şekilde oluyor.

<?php
return [
'dashboard'=>'Dashboard',   
'system' => 'System', 
'customers'=>'Customers'
];

Bu içeriği şu şekilde çağırıyoruz.

{{ __('menu.dashboard') }}
//veya
@lang('menu.dashboard')

PHP’de işler böyle.. Peki Vue kullandığımızda artık iş PHP’den çıktığı için Javascript’le başbaşa kalıyoruz. O zaman bu dil dosyalarını nasıl kullanabiliriz?

Bunun için çeşitli yaklaşımlar mevcut ancak ben bugün şunu deneyip kullandım. Gayet sade bir çözüm olduğunu düşünüyorum.

var appMenu = new Vue({
            el: '#app-menu',
            data: {
                menuitems:{!! $menuitems !!}},
                lang:{
                    menu:{!! json_encode(__('menu')) !!},
                    something:{!! json_encode(__('something')) !!}
                }
            },
            methods:{
                __:function(key)
                {

                    if (key.match(/\./))
                    {
                        var str = key.split(".")

                        if (typeof this.lang[str[0]] !== "undefined" && typeof this.lang[str[0]][str[1]] !== "undefined")
                            return this.lang[str[0]][str[1]]
                        else
                            return key

                    }
                    else
                        return key;

                }
            }
        });

Kullanımına örnek olarak;

<li v-for="item in menuitems">
@{{__(item.name)}}
</li>

Böylece Blade template’ine çok benzer bir şekilde __() fonksiyonu ile translate yapabiliriz. Bu fonksiyonu her Vue nesnesine tekrar tekrar yazmamak için Mixins yapısı kullanılabilir sanıyorum. Kısaca araştırdım ama uygulamadım. Vue’ya henüz o kadar hakim değilim. Ayrıca bana tek bir yerde bu şekilde kullanmak lazım olduğu için mixins’e ihtiyaç duymadım. İlgilisi bakabilir.