Skip to content

uiwebkit/localize-vue-2x

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Uni Localization example for Vue.js 2.x

Check out demo here

Check out our docs here

Add to main.js

Vue.config.ignoredElements = [/uni-\w*/];

Add to index.html

<script type="module" src="https://cdn.jsdelivr.net/npm/@uiwebkit/[email protected]/dist/flag/flag.esm.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@uiwebkit/[email protected]/dist/udk.esm.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@uiwebkit/[email protected]/dist/mat.esm.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@uiwebkit/[email protected]/dist/loc/loc.esm.js"></script>

Place Uni Language Menu into the header of your web app. Specify the path to the language list JSON file (ex. lang-menu.json) or backend API endpoint

<uni-router shadow></uni-router>
<uni-lang-menu-shadow mini round routing url="lang-menu.json"></uni-lang-menu-shadow>

Wrap your content with Uni Translate globally (for more convenience)

<uni-translate><ContentComponent/></uni-translate>

or wrap your text content with Uni Translate locally (for better performance)

<uni-translate>localized content</uni-translate>

localize partially

<uni-translate>text and (( partially localized ))</uni-translate>

localize attributes

<uni-translate>
  <a href="https://your_domain/(( localized ))">link</a>
</uni-translate>

open and modify ./public/lang-menu.json and translation files into ./public/i18n/ folder