Πως να χρησιμοποιήσω τα translation files του Laravel μέσα σε Vue components?

  • Time to read less than 1 minute
lang-js-laravel-localization-loader-vue-js

Όταν γνωρίστηκα με το vue.js είχα πορωθεί. Βασικά ακόμα είμαι πορωμένος! Το χρησιμοποιώ πλέον συνδυαστικά με το Laravel, όπου ο συνδυασμός τους δίνει τρελές δυνατότητες, αλλά ταυτόχρονα και ανάγκη για περισσότερη οργάνωση και consistency ώστε να μη χαθεί η μπάλα!

Φυσικά αν δεν ξέρεις για τι μιλάω, καλύτερα να μπεις στα links που δίνω παραπάνω και να μη διαβάσεις άλλο το άρθρο.

Πάμε λοιπόν!

Δύο βασικά πράγματα που χρησιμοποιώ στα blades του Laravel είναι η route function και τα translations. Θεωρώ πολύ σημαντικό να χρησιμοποιούνται και τα δύο, ειδικά σε μεγάλες εφαρμογές. Για τα routes ο λόγος είναι ότι κατασκευάζοντας το url από το όνομα του route, σου επιτρέπει με τεράστια ευκολία να αλλάξεις το endpoint σε ένα μόνο σημείο χωρίς να τρέχεις σε όλη την εφαρμογή και να κάνεις αλλαγές όπου το έχεις χρησιμοποιήσει. 

Για τα translations το ίδιο. Τα πράγματα είναι οργανωμένα σε ένα σημείο. Όταν αλλάζεις γλώσσα στην εφαρμογή τότε πηγαίνει στο αντίστοιχο αρχείο και παίρνει τις σωστές μεταφράσεις, αλλά και το ανάποδο. Αν για παράδειγμα χρησιμοποιείς την λέξη Σύνδεση σε πολλά σημεία στην εφαρμογή σου (navigation bar, footer, main body και δεν ξέρω κι εγώ που αλλού), τότε με αυτό τον τρόπο αν θες ξαφνικά να το αλλάξεις σε Συνδέσου Τώρα τότε η αλλαγή γίνεται σε ένα μόνο σημείο. Αυτό το χρησιμοποιώ ακόμα και όταν η εφαρμογή μου είναι μονογλωσσική.

Όπως καταλαβαίνεις λοιπόν αυτά που θα ακολουθήσουν είναι αρκετά τεχνικά και σίγουρα πρέπει να έχεις καλή εικόνα για τα translations του Laravel αλλά να έχεις νιώσει και την ανάγκη να κάνεις το ίδιο πράγμα μέσα από ένα Vue Component.

Βασικά αυτό που χρειαζόμαστε είναι το lang.js και το laravel-localization-loader .

Πρώτα σου περιγράφω τι θα κάνουμε και μετά θα δούμε τον κώδικα που το κάνει.

Το lang.js μας δίνει μία μέθοδο get σε frontend παρόμοια με το blade directive του Laravel @lang ή τη μέθοδο με τις δύο κάτω παύλες __. 

Υπάρχει λοιπόν ένα αντικείμενο messages μέσα στο οποίο βρίσκονται οι μεταφράσεις μας.

messages: { 
    'en.greetings': { 
        'hi': 'Hi' 
    }, 
    'es.greetings': { 
        'hi': 'Hola' 
    } 
}

Οπότε αν η τρέχουσα γλώσσα είναι αγγλικά τότε με την μέθοδο get έχεις κάτι τέτοιο

lang.get('greetings.hi')

Κάτι παρόμοιο δηλαδή με τα translations του Laravel.

Δε θα ήταν όμως πολύ ωραίο να μπορείς να χρησιμοποιήσεις τα ίδια php αρχεία που έχεις για το Laravel και μην τα γράφεις 2 φορές και τα συντηρείς σε 2 σημεία; Ε, ναι προφανώς! Σκέψου λοιπόν το στόχο. Θα φτιάξουμε κάτι τέτοιο.

messages: {
    'en.greetings': require('../../resources/lang/en/greetings.php'),
    'es.greetings': require('../../resources/lang/es/greetings.php')
}

Εκεί θα καταλήξουμε. Το πρόβλημα είναι ότι Laravel Mix δεν ξέρει τι είναι τα php αρχεία που κάνω require και τι να κάνει με αυτά και σκάνε όλα. Εδώ έρχεται το laravel-localization-loader. Aφού το κάνεις εγκατάσταση θα προσθέσουμε ένα config στο mix και θα παίξει σωστά.

Συνεχίζω λίγο ακόμα περιγραφικά γιατί ωραία τα λέμε μέχρι εδώ αλλά ακόμα δεν έχουμε πρόσβαση όλης αυτής της δουλειάς μέσα σε Vue Components. Εγώ αυτό που κάνω είναι να φτιάξω ένα Vue Mixin μέσα στο οποίο στην πραγματικότητα φτιάχνω μία global function που έχουν πρόσβαση όλα τα components μου και τέλος! Βασικά μάντεψε ποιο είναι το όνομα που θα δώσω στην συνάρτηση. Κάτω 2 παύλες __ ώστε να ταιριάζει με το Laravel και να μην σκάω κάθε φορά πως το λένε εδώ και πως το λένε εκεί.

Ιστορία τέλος! Πάμε στην πράξη (την οποία θα βρεις και στα documentation).

1. Εγκατάσταση του lang.js 

npm install lang.js

2. Εγκατάσταση του laravel-localization-loader

npm install laravel-localization-loader

3. Ενημέρωση του webpack με ένα config ώστε να ξέρει τι να κάνει με τα php αρχεία

mix.webpackConfig({ 
    module: { 
        rules: [{ // Matches all PHP or JSON files in `resources/lang` directory. 
            test: /resources[\\\/]lang.+\.(php|json)$/, 
            loader: 'laravel-localization-loader', 
        }] 
    } 
});

4. Δημιουργία του αρχείου messages.js το οποίο φτιάχνει το αντικείμενο με τα γλωσσικά. Εδώ βάζεις τα translations όπως υπάρχουν μέσα στο laravel.

// messages.js 
export default { // The key format should be: 'locale.filename'. 
    'en.messages': require('../../resources/lang/en/messages.php'), 
    'es.messages': require('../../resources/lang/es/messages.php'), 
    'en.auth': require('../../resources/lang/en/auth.php'), 
    'es.auth': require('../../resources/lang/es/auth.php'), }

5. Δημιουργία ενός lang αντικειμένου και αρχικοποίηση του με τα messages και τη default γλώσσα. (Εγώ το κάνω αυτό μέσα στο app.js)

import Lang from 'lang.js'; 
import messages from './messages'; 
let lang = new Lang({ messages }); 
lang.setFallback('el');

Προφανώς αν το messages.js και το app.js δεν είναι στο ίδιο directory τότε πρέπει να ενημερώσεις ανάλογα το παραπάνω

6. Δημιουργία της global μεθόδου στο Vue μέσω mixin

Vue.mixin({ 
    methods: { 
        __(key) { 
            return lang.get(key); 
        }
    }
});

Προφανώς αυτό μπορείς να το κάνεις και πιο σύνθετο με χρήση replacements, singular, plural και τα σχετικά. Ότι υποστηρίζει το Laravel δηλαδή υπάρχει και στο lang.js αντίστοιχα.

Αν τα έχουμε κάνει όλα σωστά τότε μέσα σε οποιοδήποτε component μπορούμε να καλέσουμε τη συνάρτηση

{{ __('greetings.hi') }}

και να δουλέψει ακριβώς όπως θα δούλευε και μέσα στο Laravel.

Ελπίζω να σε βοήθησα και να πήρες πράγματα από αυτό το άρθρο.

Για απορίες μπορείς να μου στείλεις ένα mail εδώ.

Για περισσότερο connection δες τι κάνω στο youtube, στο instagram, στο facebook αλλά και στο ucanteachme.gr

Αν θέλεις μπορείς να με σπονσοράρεις κερνώντας με έναν καφέ εδώ.

Τα λέμε στο επόμενο!

 

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.