search

ARCANEDEV / Localization

:globe_with_meridians: Localization package for Laravel
MIT License
187 stars 38 forks source link

laravel Localization vue-router and components? #102

Closed NadhirBoukhenifra closed 7 years ago

NadhirBoukhenifra commented 7 years ago

Description:

how to use functions and the whole package with vue js 2 components like: this

public function getCurrentLocaleNative()

or this like this:

public function getCurrentLocaleDirection()

and im using vue-router and i want to localize my components ? and the v-router-link? my routes/web.php file content:

Route::localizedGroup(function () {
    Route::get('/', function() {
        return view('app');
    });

    Route::get('/{vue?}', function () {
        return view('app');
    })->where('vue', '[\/\w\.-]*')->name('app');
});

but its not work 100%

just i want to use this package with vue-router and use functions inside vue js components.

Steps To Reproduce:

arcanedev-maroc commented 7 years ago

This package is only tested with laravel projects (PHP).

I don't know how the vue-router works, i've never used it.

But you can grab the current locale entity instead of its properties separately (name, native, direction ...).

You can also convert it to json and pass it as a props in your vue app/components.

NadhirBoukhenifra commented 7 years ago

Hello @arcanedev-maroc thank you for replying. this is sample laravel app using vue-router: https://github.com/fagray/vuejs2-laravel53-starter

if you have time you can install it and try your package ... so you can improve it and adding new features.

this is a basic vue-router code:

          <div class="row">
            <div class="col-md-4">
                <div class="list-group">
                    <router-link to="/" class="list-group-item ">Index</router-link>
                    <router-link to="/home" class="list-group-item ">Home</router-link>
                    <router-link to="/foo" class="list-group-item ">foo</router-link>
                    <router-link to="/bar" class="list-group-item ">Bar</router-link>
                </div>
            </div>

            <router-view class="view"></router-view>

        </div>

if you click the home the router-view load Home Component to view without refreshing the page.

i have the same navigation using to="" option.

The Problem is: (using my router code above) like this:

  1. enter the site directly: https://project.dev
  2. then automatically go to : https://project.dev/en & nothing to show (error)
  3. clicking home (from navigation): https://project.dev/home showing the home component.
  4. changing the language to ar: redirect me to https://project.dev/ar and the same nothing to show. (must stay in the same page with another language)
  5. then try add home after url -> https://project.dev/ar/home the same error. nothing to show.
  6. then trying writing directly the link: https://project.dev/home redirect me to https://project.dev/ar/home and the same error.

i think the problem is from the router groupe?

Route::localizedGroup(function () {
    Route::get('/{vue?}', function () {
        return view('app');
    })->where('vue', '[\/\w\.-]*')->name('app');
});

how i can pass the $locale before the link? in get. i will try again & again.

and thank you.

shirshak55 commented 7 years ago

@NadhirBoukhenifra You can add current locale to html tag

<html lang="{{ app()->getLocale() }}">

Mind it you will need to reload the page if user change the language which should not be painful.

After selecting you can install this package martinlindhe/laravel-vue-i18n-generator

Use it in Vue . You can read docs in package.

Now you can try every thing according to i18n.

Hope it helps