Translate App

Last updated 2 days ago

In this section you will learn about how you can translate your app in your preferred language.

Winnie support multilingual feature which helps you to build your app in multilingual. Read the documentation carefully and follow the steps.

How To Set Default Locale

Follow the steps if you want to set default locale you can choose english, french according to your desired locale.

Go to the src -> store -> modules -> settings directory and open data.js file.

Where languages is type of array which provides you to set of locales. Languages are defined in the data.js file under the src -> store -> modules -> settings directory.

data.js
// languages
export const languages = [
{
name: "English",
locale: "en"
},
{
name: "French",
locale: "fr"
}
]

How To Add A New Locale

Here are the instructions to add a new locale in your app. We are taken an example of French that we are going to add.

Create a directory with name of locale code inside the src -> lang directory.

Create index.js file under the directory that you have just created and define the static strings which you want translate into German, you can check the other locale files how strings are defined.

index.js
{
"HOME":"Accueil",
"SHOP":"Boutique",
"PRODUCT DETAILS": "détails du produit",
"CART" : "Chariot"
}

Open src -> lang -> index.js file and import the file that you have just created e.g.,

index.js
...
import fr from './fr'
export default {
fr: {
message: fr
}
}

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

index.js
export const languages = [
{
name: "French",
locale: "fr"
}
]

That's it, Now you can translate your app in your preferred language.