{"id":193,"date":"2019-09-02T05:49:51","date_gmt":"2019-09-02T05:49:51","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/vuely\/?page_id=193"},"modified":"2019-10-19T07:31:28","modified_gmt":"2019-10-19T07:31:28","slug":"translate-the-appmulti-language-support","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/vuely\/translate-the-appmulti-language-support\/","title":{"rendered":"Translate The App(Multi Language Support)"},"content":{"rendered":"\n

Vuely<\/strong> support multilingual feature which helps you to build your app in your native language. Read the documentation below carefully and follow the given steps.<\/p>\n\n\n\n

How To Set Default Locale<\/h5>\n\n\n\n

Vuely<\/strong> provide you the options to change the default locale of the template according to your language. You can choose from the given table of the languages, to set any language as your default locale. Languages is a type of array used in the template and we are showing it here in the form of table.<\/p>\n\n\n\n
Language<\/strong><\/td>Assigned Number<\/strong><\/td>Default Language Codes<\/strong><\/td><\/tr>
English
<\/td>		0<\/td>en<\/td><\/tr>
French<\/td>1<\/td>fr<\/td><\/tr>
Hebrew<\/td>2<\/td>he<\/td><\/tr>
Russian<\/td>3<\/td>ru<\/td><\/tr>
Arabic<\/td>4<\/td>ar<\/td><\/tr>
Chinese<\/td>5<\/td>cn<\/td><\/tr>
German<\/td>6<\/td>ge<\/td><\/tr>
Spanish<\/td>7<\/td>sp<\/td><\/tr>
Japanese<\/td>8<\/td>ja<\/td><\/tr>
Korean<\/td>9<\/td>ko<\/td><\/tr>
Italian<\/td>10<\/td>it<\/td><\/tr>
Hungarian<\/td>11<\/td>hu<\/td><\/tr><\/tbody><\/table>\n\n\n\n

Go to the src->store->modules->settings<\/code> directory and open index.js<\/code> file. Search for the key selectedLocale<\/code> and update its value with languages[Number_Assigned_In_Above_Table]<\/code>. You can get the number assigned to any particular language from the table above.<\/p>\n\n\n\n

For Example:<\/p>\n\n\n\n

...
import { languages } from \".\/data\";
 
const state = {
    ...,
    languages,     \/\/ make sure languages are imported from the data.js file
    selectedLocale: languages[0] \/\/ for english, languages[1] for french
    ...
}<\/pre>\n\n\n\n
How To Add A New Locale<\/h5>\n\n\n\n
Here are the instructions to add a new locale in your app. We have taken an example of adding German<\/strong> language to the template.<\/p>\n\n\n\n
Create a directory with name of locale code inside the src->lang<\/code> directory. For German Language Example<\/strong>: create a dictionary with ge<\/code><\/p>\n\n\n\n
Create index.js<\/code> file under the directory that you have just created and define the static strings which you want to translate into German, you can check the other locale files to copy all the strings and then convert them to German<\/strong> language. Example below:<\/p>\n\n\n\n
\/messages.js
export default {
   general: 'Allgemeines',
   overview: '\u00dcberblick'
}<\/pre>\n\n\n\n
After defining all the strings. Open src->lang->index.js<\/code> file and import the file that you have just created. Example:<\/p>\n\n\n\n
...
import ge from '.\/ge';
 
export default {
   ...,
   ge: {
     message: ge
   }
}<\/pre>\n\n\n\n
Now you need to add your locale inside the data.js<\/code> file under the src->store->modules->settings<\/code> directory.<\/p>\n\n\n\n
\u2026
 \/\/ languages
 export const languages = [
    {
       name: \"English\",
       icon: \"en\",
       locale: \"en\"
    },
    {
       name: \"French\",
       icon: \"fr\",
       locale: \"fr\"
    },
    {
       name: \"Hebrew\",
       icon: \"he\",
       locale: \"he\"
    },
    {
       name: \"Russian\",
       icon: \"ru\",
       locale: \"ru\"
    },
    {
       name: \"Arabic\",
       icon: \"ar\",
       locale: \"ar\"
    },
    \/\/ your locale goes to here
    {
       name: \"German\",
       icon: \"ge\",
       locale: \"ge\"
    }
 ]
 \u2026<\/pre>\n\n\n\n
Make sure you add the new locale at the last position in the array. Also the numbers that are assigned to each language for passing it into the selectedLocale is self incrementing. Take care of the number that is being passed to the selectedLocale accordingly.<\/p><\/blockquote>\n\n\n\n
That’s it, Now you are done with adding a new locale to the template.<\/p>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n        <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Vuely support multilingual feature which helps you to build your app in your native language. Read the documentation below carefully and follow the given steps. How To Set Default Locale Vuely provide you the options to change the default locale of the template according to your language. You can choose from the given table of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/193"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":9,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"predecessor-version":[{"id":871,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/193\/revisions\/871"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}