Translate The App(Multi Language Support)

In this section, you will get detailed documentation to learn about how you can translate your app in your preferred language.

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 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.

Language	Assigned Number	Default Language Codes
English	0	en
French	1	fr
Hebrew	2	he
Russian	3	ru
Arabic	4	ar
Chinese	5	cn
German	6	ge
Spanish	7	sp
Japanese	8	ja
Korean	9	ko
Italian	10	it
Hungarian	11	hu

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

For Example:

index.js

...
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
    ...
}

How To Add A New Locale

Here are the instructions to add a new locale in your app. We have taken an example of adding German language to the template.

Create a directory with name of locale code inside the src->lang directory. For German Language Example: create a dictionary with ge

Create index.js 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 language. Example below:

index.js

/messages.js
export default {
   general: 'Allgemeines',
   overview: 'Überblick'
}

After defining all the strings. Open src->lang->index.js file and import the file that you have just created. Example:

...
import ge from './ge';

export default {
   ...,
   ge: {
     message: ge
   }
}

Now you need to add your locale inside the data.js file under the src->store->modules->settings directory.

index.js

...

// 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"
   }
]
...

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.

That's it, Now you are done with adding a new locale to the template.