Fix i18n example

examples/i18n/layouts/default.vue

@@ -4,16 +4,16 @@
       <div class="container">
         <h1 class="Header__Title">Nuxt i18n</h1>
         <nav class="Header__Menu">
-          <nuxt-link class="Header__Link" :to="path('/')">
+          <nuxt-link class="Header__Link" :to="path('/')" exact>
             {{ $t('links.home') }}
           </nuxt-link>
           <nuxt-link class="Header__Link" :to="path('/about')">
             {{ $t('links.about') }}
           </nuxt-link>
-          <nuxt-link class="Header__Link" v-if="$store.state.lang.lang === 'en'" to="/fr">
+          <nuxt-link class="Header__Link" v-if="$store.state.lang.lang === 'en'" :to="`/fr` + $route.fullPath" active-class="none">
             {{ $t('links.french') }}
           </nuxt-link>
-          <nuxt-link class="Header__Link" v-else to="/">
+          <nuxt-link class="Header__Link" v-else :to="$route.fullPath.replace(/^\/[^\/]+/, '')" active-class="none">
             {{ $t('links.english') }}
           </nuxt-link>
         </nav>
@@ -94,4 +94,7 @@ html, body
   color: #2e2f30;
   background-color: #fff;
 }
+.nuxt-link-active {
+  color: cyan;
+}
 </style>

examples/i18n/layouts/error.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="error-page">
+    <div>
+      <h1 class="error-code">{{ error.statusCode }}</h1>
+      <div class="error-wrapper-message">
+        <h2 class="error-message">{{ error.message }}</h2>
+      </div>
+      <p v-if="error.statusCode === 404"><nuxt-link class="error-link" to="/">Back to the home page</nuxt-link></p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['error'],
+  head () {
+    return {
+      title: this.error.message || 'An error occured'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.error-page {
+  color: #000;
+  font-family: "SF UI Text", "Helvetica Neue", "Lucida Grande";
+  text-align: center;
+  padding-top: 20%;
+}
+.error-code {
+  display: inline-block;
+  font-size: 24px;
+  font-weight: 500;
+  vertical-align: top;
+  border-right: 1px solid rgba(0, 0, 0, 0.298039);
+  margin: 0px 20px 0px 0px;
+  padding: 10px 23px;
+}
+.error-wrapper-message {
+  display: inline-block;
+  text-align: left;
+  line-height: 49px;
+  height: 49px;
+  vertical-align: middle;
+  margin-bottom: 20px;
+}
+.error-message {
+  font-size: 14px;
+  font-weight: normal;
+  margin: 0px;
+  padding: 0px;
+}
+.error-link {
+  color: #000;
+  font-weight: normal;
+  font-size: 14px;
+}
+</style>

examples/i18n/middleware/i18n.js

@@ -1,7 +1,8 @@
 export default async function ({ store, params, error }) {
   const lang = params.lang || 'en'
   if (!store.state.lang.locales.includes(lang)) {
+    await store.dispatch('lang/setLang', 'en')
     return error({ message: 'Page not found', statusCode: 404 })
   }
-  return store.dispatch('lang/setLang', lang)
+  await store.dispatch('lang/setLang', lang)
 }