[Vuejs]-Vue page does not render changes

by

0👍

✅

For me I add translation to Vue component by passing it as props lets say I want to Support Both Arabic and English in my website so here are the steps

First Create the translation files in the lang directory 

resources/lang/en/main.php    //English Translation
resources/lang/ar/main.php    //Arabic Translation

lets say these file returns only one key to be translated so they look like this

English File 

<?php
//resources/lang/en/main.php

return [
    'greeting' => 'Hello',
];

Arabic File

<?php
//resources/lang/ar/main.php

return [
    'greeting' => 'مرحبا',
];

lets say that you want to be able to use these translation on one of your Vue components for example the TestComponent.vue all you have to do is render this component in one of your blade files I will call my blade test.blade.php

//test.blade.php
.
.
.
<body>
    <div id="app"><!-- app id is for vue js to mount the application here-->

        <!--
            here this is called passing a props to a vue componenet
            this props name is trans since we passed :trans
            and its value is json_encode(trans('main'))
            main is the main.php file we created before Laravel
            will pass the english or arabic based on the current App locale
        -->

        <test-component :trans="{{json_encode(trans('main'))}}"></test-component>
    </div>
</body>
.
.
.

Now lets take a look on how to use the translation inside of our TestComponent.vue

<template>
    <h1>{{ trans.greeting }}</h1>
</template>

export default {
    props : ['trans'], // this should be called trans since in blade we passed it as trans
    data(){
        return {

        }
    }
}

Hope this explanation helps to solve your problem , Good luck.

Leave a comment