Vuely
  • Introduction
  • Folder Structure
  • Vuely VueJs
    • Different Layouts
      • Adding Menu In Different Layouts
    • Installation
    • Adding New Component
    • Translate The App(Multi Language Support)
    • Adding New Widgets
    • Themes
    • Style Customization
    • Build an App from Scratch
    • Seed Project
    • Deployment
    • UI Components
      • Buttons
      • Cards
      • Selection controls
      • Carousel
      • Chips
      • Date/Month Pickers
      • Dialog
      • Grid
      • Input / Text field
      • List
      • Menu
      • Progress
      • Banner
      • Select
      • Slider
      • Tabs
      • Toolbar
      • Timepicker
      • Forms
  • Vuely-Laravel
    • Folder Structure
    • Installation Vuely-Laravel
    • Customization
  • Vuely-Laravel with Api Authentication
    • Getting Started
    • Passport Authentication
    • Run Vuely-Laravel-Passport
  • Vuely ExpressJs
    • Folder Structure
    • Installation
    • Layouts
    • Style Customization
    • Deployment
    • Translate the App
    • Browsers Compatibilty
    • Credits
  • Vuely Angular Version
    • Folder Structure
    • Installation
    • Layouts
    • Adding/Deleting Menu & Component
    • RTL
    • Deployment
  • Credits
  • Template Update
  • FAQ's (Frequently Asked Questions)
  • Changelog
  • Customer Support
Powered by GitBook
On this page
  • How To Set Default Language
  • How To Add A New Locale
  1. Vuely ExpressJs

Translate the App

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

How To Set Default Language

Follow the steps if you want to set default language you can choose english, french, hebrew, russian and arabic according to your desired language.

Go to the public-> javascripts-> main.js


// Change code of the language to set the default language
  var langCode = 'en'; 

Go to the routes->session->session.js

// Change code of the language to set the default language
var defaultLang = '?clang=en';

After that access any page.

Where languages is type of array which provides you to set of locales. Languages are defined in the data.js file under the

routes-> data.js

data.js
exports.languages = [{
                        name: "English",
                        icon: "en"
                     },{
                        name: "French",
                        icon: "fr"
                     },{
                        name: "Hebrew",
                        icon: "he"
                     },{
                        name: "Russian",
                        icon: "ru"
                     }
                   ]        

How To Add A New Locale

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

Create ge.json file under the directory lang->ge.jsonthat 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.

ge.json
{
   "general": "Allgemeines",
   "overview": "Überblick",
}

Add new "ge" variable in app.js file

app.js
app.use(i18n({
   translationsPath: path.join(__dirname, 'lang'), // <--- use here. Specify translations files path.
   siteLangs: ["ar","en","cn","fr","he","es","ru","ge"], // add new locales
   cookieLangName : 'ulang',
   browserEnable : 'true',
   textsVarName: 'translation'  
}));

Now you need to add your locale inside the data.js file under the routes-> data.js directory.

data.js
...
exports.languages = [{
                        name: "English",
                        icon: "en"
                     },{
                        name: "French",
                        icon: "fr"
                     },{
                        name: "Hebrew",
                        icon: "he"
                     },{
                        name: "Russian",
                        icon: "ru"
                     },
                     // your locale goes to here
                     {
                        name: "German",
                        icon: "ge"
                     }
                  ]       
...                  

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

PreviousDeploymentNextBrowsers Compatibilty

Last updated 6 years ago