example i18n

examples/i18n/layouts/default.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <header class="Header">
+      <div class="container">
+        <h1 class="Header__Title">Nuxt i18n</h1>
+        <nav class="Header__Menu">
+          <nuxt-link class="Header__Link" :to="path('/')">
+            {{ $t('message.home') }}
+          </nuxt-link>
+          <nuxt-link class="Header__Link" :to="path('/about')">
+            {{ $t('message.about') }}
+          </nuxt-link>
+          <nuxt-link class="Header__Link" v-if="$route.params.lang" to="/">
+            {{ $t('message.english') }}
+          </nuxt-link>
+          <nuxt-link class="Header__Link" v-else to="/fr">
+            {{ $t('message.french') }}
+          </nuxt-link>
+        </nav>
+      </div>
+    </header>
+    <nuxt/>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    path (url) {
+      console.log(this.$route.params.lang + url)
+      return (this.$route.params.lang) ? this.$route.params.lang + url : url
+    }
+  }
+}
+</script>
+
+<style>
+html, body
+{
+  background-color: #fff;
+  color: #2e2f30;
+  letter-spacing: 0.5px;
+  font-size: 18px;
+  font-family: "Source Sans Pro", Arial, sans-serif;
+  height: 100vh;
+  margin: 0;
+}
+*, *:before, *:after
+{
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.container
+{
+  width: 75%;
+  margin: 0 auto;
+}
+.container:after
+{
+  content: "";
+  display: table;
+  clear: both;
+}
+.Header
+{
+  color: #fff;
+  height: 80px;
+  line-height: 80px;
+  background-color: #2e2f30;
+}
+.Header__Title
+{
+  float: left;
+  font-weight: 300;
+  font-size: 30px;
+}
+.Header__Menu
+{
+  float: right;
+}
+.Header__Link
+{
+  font-size: 16px;
+  color: #fff;
+  border: 1px solid #fff;
+  padding: 7px 12px;
+  text-transform: uppercase;
+  text-decoration: none;
+  border-radius: 5px;
+  margin-left: 10px;
+}
+.Header__Link:hover
+{
+  color: #2e2f30;
+  background-color: #fff;
+}
+</style>

examples/i18n/package.json

@@ -1,8 +1,7 @@
 {
-  "name": "vue-i18n",
+  "name": "i18n",
   "dependencies": {
-    "nuxt": "latest",
-    "vue-i18n": "latest"
+    "nuxt": "latest"
   },
   "scripts": {
     "dev": "nuxt",

examples/i18n/pages/_lang/about.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="Content">
+    <div class="container">
+      <h1 class="Content__Title">{{ $t('message.about') }}</h1>
+    </div>
+  </div>
+</template>
+
+<style>
+.Content
+{
+  padding: 50px 0;
+  text-align: center;
+}
+.Content__Title
+{
+  font-weight: 300;
+  padding-bottom: 30px;
+}
+</style>

examples/i18n/pages/_lang/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="Content">
+    <div class="container">
+      <h1 class="Content__Title">{{ $t('message.welcome') }}</h1>
+      <p>{{ $t('message.introduction') }}</p>
+    </div>
+  </div>
+</template>
+
+<style>
+.Content
+{
+  padding: 50px 0;
+  text-align: center;
+}
+.Content__Title
+{
+  font-weight: 300;
+  padding-bottom: 30px;
+}
+</style>

examples/i18n/static/locales/en.json

@@ -0,0 +1,10 @@
+{
+  "message": {
+    "english": "English version",
+    "french": "French version",
+    "welcome": "Welcome",
+    "introduction": "This is an introduction in English.",
+    "home": "Home",
+    "about": "About"
+  }
+}

examples/i18n/static/locales/fr.json

@@ -0,0 +1,10 @@
+{
+  "message": {
+    "english": "Version Anglaise",
+    "french": "Version Française",
+    "welcome": "Bienvenue",
+    "introduction": "Ceci est un texte d'introduction en Français.",
+    "home": "Accueil",
+    "about": "À propos"
+  }
+}

examples/vue-i18n/pages/_lang/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div>
-    <p>{{ $t('message.welcome') }}</p>
-    <nuxt-link to="/fr">French</nuxt-link>
-    <nuxt-link to="/">English</nuxt-link>
-  </div>
-</template>

examples/vue-i18n/static/locales/en.json

@@ -1,5 +0,0 @@
-{
-  "message": {
-    "welcome": "Welcome"
-  }
-}

examples/vue-i18n/static/locales/fr.json

@@ -1,5 +0,0 @@
-{
-  "message": {
-    "welcome": "Bienvenue"
-  }
-}