Skip to content

Instantly share code, notes, and snippets.

@adrai

adrai/app.js

Created August 27, 2018 17:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adrai/54ccddbabbba736e0460c1f01e546179 to your computer and use it in GitHub Desktop.
Save adrai/54ccddbabbba736e0460c1f01e546179 to your computer and use it in GitHub Desktop.
Download ZIP
vue-i18next
Raw
app.js
/* eslint-disable no-undef, new-cap */
i18next
.use(i18nextXHRBackend)
.use(i18nextBrowserLanguageDetector)
.init({
fallbackLng: 'en',
backend: {
loadPath: '../locales/{{lng}}/{{ns}}.json'
},
ns: ['translations'],
defaultNS: 'translations'
}
);
const i18n = new VueI18next(i18next);
Vue.component('app', {
template: `
<div id="root">
<div class="App">
<div class="App-header">
<img src="https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/spaces%2F-L9iS6Wm2hynS5H9Gj7j%2Favatar.png?generation=1523462254548780&alt=media" class="App-logo" alt="logo">
<h2>{{ $t("title", { "tech": "vue", "lib": "vue-i18next" }) }}</h2>
</div>
<button v-on:click="changeLanguage('de')">de</button>
<button v-on:click="changeLanguage('en')">en</button>
<div class="App-intro">{{ $t("description") }}</div>
</div>
</div>`,
methods: {
changeLanguage(lang) {
this.$i18n.i18next.changeLanguage(lang);
},
},
});
new Vue({
i18n,
}).$mount('#app');
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>Vue.js App</title>
<script src="https://unpkg.com/vue@2.2.2/dist/vue.js"></script>
<script src="https://unpkg.com/i18next@11.6.0/i18next.js"></script>
<script src="https://panter.github.io/vue-i18next/dist/vue-i18next.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-browser-languagedetector/2.2.3/i18nextBrowserLanguageDetector.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-xhr-backend/1.5.1/i18nextXHRBackend.min.js"></script>
</head>
<body>
<div id="app">
<app />
</div>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment