i18n module loaded

components/PostListCard.vue

@@ -8,7 +8,7 @@
       <v-list-item
         v-for="post of posts"
         :key="post.id"
-        :to="{ name: 'blog-id', params: { id: post.id } }"
+        :to="localePath({ name: 'blog-id', params: { id: post.id } })"
       >
         <v-list-item-title class="text-capitalize">
           {{ post.title }}
@@ -28,7 +28,7 @@ export default {
     },
     title: {
       type: String,
-      default: 'Posts'
+      required: true
     }
   }
 }

layouts/default.vue

@@ -54,7 +54,22 @@
 
     <!--Footer-->
     <v-footer app fixed>
-      <span>&copy; {{ new Date().getFullYear() }}</span>
+      <v-container class="py-0">
+        <v-layout>
+          <v-spacer />
+          <v-col cols="12" md="3" class="pa-0">
+            <v-select
+              :items="locales"
+              :label="localeLabel"
+              hide-details
+              item-text="name"
+              item-value="code"
+              solo
+              @change="onLocaleChange"
+            />
+          </v-col>
+        </v-layout>
+      </v-container>
     </v-footer>
     <!--// Footer-->
   </v-app>
@@ -68,22 +83,40 @@ export default {
     return {
       drawer: false,
       title: 'Awesome Nuxt.js',
-      icons: { mdiBrightness4, mdiBrightness7 },
-      menuItems: [
+      icons: { mdiBrightness4, mdiBrightness7 }
+    }
+  },
+  computed: {
+    locale() {
+      return this.$i18n.locale
+    },
+    localeLabel() {
+      return this.$i18n.locales.find((i) => i.code === this.locale).name
+    },
+    locales() {
+      return this.$i18n.locales.filter((i) => i.code !== this.locale)
+    },
+    menuItems() {
+      return [
         {
-          text: 'Home',
-          to: '/'
+          text: this.$t('menuItems.home'),
+          to: this.localePath('/')
         },
         {
-          text: 'Authors',
-          to: '/authors'
+          text: this.$t('menuItems.authors'),
+          to: this.localePath('/authors')
         },
         {
-          text: 'Blog',
-          to: '/blog'
+          text: this.$t('menuItems.blog'),
+          to: this.localePath('/blog')
         }
       ]
     }
+  },
+  methods: {
+    onLocaleChange(code) {
+      this.$router.push(this.switchLocalePath(code))
+    }
   }
 }
 </script>

layouts/error.vue

@@ -7,8 +7,9 @@
       {{ otherError }}
     </h1>
     <NuxtLink to="/">
-      Home page
+      {{ $t('menuItems.home') }}
     </NuxtLink>
+    {{ error }}
   </v-app>
 </template>
 

locales/en-US.js

@@ -0,0 +1,18 @@
+export default {
+  welcome: 'Welcome',
+  loading: 'Loading',
+  menuItems: {
+    home: 'Home',
+    authors: 'Authors',
+    blog: 'Blog'
+  },
+  blog: {
+    posts: 'Posts',
+    comments: 'Comments',
+    backToList: 'back to blog posts'
+  },
+  author: {
+    authors: 'Authors',
+    posts: 'Posts of The Author'
+  }
+}

locales/tr-TR.js

@@ -0,0 +1,18 @@
+export default {
+  welcome: 'Merhaba',
+  loading: 'Yükleniyor',
+  menuItems: {
+    home: 'Anasayfa',
+    authors: 'Yazarlar',
+    blog: 'Blog'
+  },
+  blog: {
+    posts: 'İçerikler',
+    comments: 'Yorumlar',
+    backToList: 'blog listesine geri dön'
+  },
+  author: {
+    authors: 'Yazarlar',
+    posts: 'Yazara ait İçerikler'
+  }
+}

nuxt.config.js

@@ -4,9 +4,6 @@ export default {
    ** Headers of the page
    */
   head: {
-    htmlAttrs: {
-      lang: 'en'
-    },
     titleTemplate: '%s - ' + 'Awesome Nuxt.js',
     title: 'Awesome Nuxt.js',
     meta: [
@@ -55,7 +52,9 @@ export default {
     // Doc: https://github.com/nuxt-community/dotenv-module
     '@nuxtjs/dotenv',
     // Doc: https://github.com/Developmint/nuxt-webfontloader
-    'nuxt-webfontloader'
+    'nuxt-webfontloader',
+    // Doc: https://nuxt-community.github.io/nuxt-i18n
+    'nuxt-i18n'
   ],
   /*
    ** Axios module configuration
@@ -92,6 +91,22 @@ export default {
       families: ['Roboto:100,300,400,500,700,900&display=swap']
     }
   },
+  /*
+   ** i18n module configuration
+   ** https://nuxt-community.github.io/nuxt-i18n/options-reference.html
+   */
+  i18n: {
+    locales: [
+      { code: 'en', file: 'en-US.js', name: 'English' },
+      { code: 'tr', file: 'tr-TR.js', name: 'Turkish' }
+    ],
+    defaultLocale: 'en',
+    lazy: true,
+    langDir: 'locales/',
+    detectBrowserLanguage: {
+      fallbackLocale: 'en'
+    }
+  },
   /*
    ** Build configuration
    */

package.json

@@ -16,6 +16,7 @@
     "@nuxtjs/dotenv": "^1.4.0",
     "@nuxtjs/gtm": "^2.2.3",
     "nuxt": "^2.0.0",
+    "nuxt-i18n": "^6.9.1",
     "nuxt-webfontloader": "^1.1.0"
   },
   "devDependencies": {

pages/authors/_id.vue

@@ -10,9 +10,9 @@
       </v-card-title>
     </v-card>
 
-    <PostListCard :posts="posts" />
+    <PostListCard :posts="posts" :title="$t('author.posts')" />
   </v-skeleton-loader>
-  <p v-else>{{ $fetchState.error.message }}...</p>
+  <p v-else>{{ $fetchState.error.message }}</p>
 </template>
 
 <script>
@@ -34,7 +34,7 @@ export default {
     },
     title() {
       return this.author === null || this.$fetchState.pending
-        ? 'Loading..'
+        ? this.$t('loading')
         : this.author.name
     }
   },

pages/authors/index.vue

@@ -6,14 +6,14 @@
   >
     <v-card>
       <v-card-title class="headline">
-        Authors
+        {{ $t('author.authors') }}
       </v-card-title>
       <v-divider />
       <v-list>
         <v-list-item
           v-for="author of authors"
           :key="author.id"
-          :to="{ name: 'authors-id', params: { id: author.id } }"
+          :to="localePath({ name: 'authors-id', params: { id: author.id } })"
         >
           <v-list-item-title class="text-capitalize">
             {{ author.name }}
@@ -40,7 +40,7 @@ export default {
   },
   head() {
     return {
-      title: 'Authors'
+      title: this.$t('author.authors')
     }
   }
 }

pages/blog/_id.vue

@@ -14,15 +14,21 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn class="text-lowercase" :to="{ name: 'blog' }" text exact small>
-          back to blog posts
+        <v-btn
+          class="text-lowercase"
+          :to="localePath({ name: 'blog' })"
+          text
+          exact
+          small
+        >
+          {{ $t('blog.backToList') }}
         </v-btn>
       </v-card-actions>
     </v-card>
 
     <v-card>
       <v-list>
-        <v-subheader>Comments</v-subheader>
+        <v-subheader>{{ $t('blog.comments') }}</v-subheader>
         <v-list-item v-for="comment in comments" :key="comment.id">
           <v-list-item-content>
             <v-list-item-title>{{ comment.name }}</v-list-item-title>
@@ -32,7 +38,7 @@
       </v-list>
     </v-card>
   </v-skeleton-loader>
-  <p v-else>{{ $fetchState.error.message }}...</p>
+  <p v-else>{{ $fetchState.error.message }}</p>
 </template>
 
 <script>
@@ -51,7 +57,7 @@ export default {
     },
     title() {
       return this.post === null || this.$fetchState.pending
-        ? 'Loading..'
+        ? this.$t('loading')
         : this.post.title
     }
   },

pages/blog/index.vue

@@ -4,7 +4,7 @@
     :loading="$fetchState.pending"
     type="card-heading,list-item@100"
   >
-    <PostListCard :posts="posts" />
+    <PostListCard :posts="posts" :title="$t('blog.posts')" />
   </v-skeleton-loader>
   <p v-else>Error while fetching posts: {{ $fetchState.error.message }}</p>
 </template>
@@ -24,7 +24,7 @@ export default {
   },
   head() {
     return {
-      title: 'Blog posts'
+      title: this.$t('blog.posts')
     }
   }
 }