feat(404): add translations

components/error/404.vue

@@ -1,13 +1,19 @@
 <template>
-  <div id="message" class="card bg-light card-body">
-    <h2>404</h2>
-    <!-- <h1>{{ $t('error.404.heading') }}</h1> -->
-    <p>
-      <!-- {{ $t('error.404.description') }} -->
-    </p>
-    <!-- <nuxt-link :to="localePath('index')" class="btn btn-primary">{{
-      $t('layout.navigation.home')
-    }}</nuxt-link> -->
+  <div>
+    <img
+      class="error__img img-fluid"
+      src="https://res.cloudinary.com/pocketpasta/image/upload/c_fit,dpr_auto,g_auto,w_auto,f_auto,q_auto:low/v1575402067/anna-pascale-GoqEgxAgQw0-unsplash_qq2jte.jpg"
+    />
+    <div id="message" class="card bg-light card-body">
+      <h2>404</h2>
+      <h1>{{ $t('error.404.heading') }}</h1>
+      <p>
+        {{ $t('error.404.description') }}
+      </p>
+      <nuxt-link :to="localePath('index')" class="btn btn-primary">{{
+        $t('layout.navigation.home')
+      }}</nuxt-link>
+    </div>
   </div>
 </template>
 
@@ -21,20 +27,27 @@ export default {
   },
   head() {
     return {
-      // title: this.$t('error.404.heading'),
+      title: this.$t('error.404.heading'),
       meta: [
-        // {
-        //   hid: 'description',
-        //   name: 'description',
-        //   content: this.$t('error.404.description'),
-        // },
+        {
+          hid: 'description',
+          name: 'description',
+          content: this.$t('error.404.description'),
+        },
       ],
     };
   },
 };
 </script>
 
 <style media="screen" scoped>
+.error__img {
+  position: fixed;
+  overflow: hidden;
+  left: 0;
+  top: 0;
+}
+
 #message {
   max-width: 360px;
   margin: 100px auto 16px;

lang/en-AU.js

@@ -0,0 +1,89 @@
+export default () => {
+  return new Promise(function(resolve) {
+    resolve({
+      error: {
+        404: {
+          heading: 'Page Not Found',
+          description:
+            'The specified file was not found on this website. Please check the URL for mistakes and try again.',
+        },
+        500: {
+          heading: 'OOPSIE WOOPSIE!!',
+          description:
+            'Uwu We make a fucky wucky!! A wittle fucko boingo! The code monkeys at our headquarters are working VEWY HAWD to fix this!',
+        },
+      },
+
+      layout: {
+        login: 'Login',
+        logout: 'Logout',
+        navigation: {
+          home: 'Home',
+          about: 'About',
+          newsletter: 'Newsletter',
+          recipes: 'Recipes',
+          products: 'Shop',
+          shoppinglist: 'Shopping List',
+          settings: 'Settings',
+        },
+      },
+      landing: {
+        banner: {
+          subheading: 'Eat spagetti to forgetti your regretti',
+        },
+        contact: {
+          heading: 'Contact us',
+          location: 'Brisbane, Australia',
+          email: 'damien.robinson@pocketpasta.com',
+        },
+        info: {
+          heading: 'Company info',
+        },
+      },
+      about: {
+        heading: 'About PocketPasta',
+      },
+      newsletter: {
+        heading: 'Subscribe to our mailing list',
+        required: 'indicates required',
+        email: {
+          label: 'Email Address',
+          placeholder: 'john.smith@example.com',
+        },
+        firstname: { label: 'First Name', placeholder: 'John' },
+        lastname: { label: 'Last Name', placeholder: 'Smith' },
+        submit: 'Subscribe',
+      },
+      recipes: {
+        heading: 'Recipes',
+      },
+      products: {
+        heading: 'Products',
+      },
+      notes: {
+        heading: 'Notes',
+      },
+      settings: {
+        heading: 'Settings',
+        style: {
+          heading: 'Style',
+          'theme-label': {
+            id: 'theme-label',
+            icon: 'style',
+            label: 'Theme',
+            description:
+              'Choose a bootstrap CSS theme to style the app your way.',
+          },
+        },
+        content: {
+          heading: 'Content',
+          language: {
+            icon: 'language',
+            label: 'Language',
+            description: 'What language do you speak?',
+          },
+        },
+      },
+    });
+  });
+};

nuxt.config.js

@@ -90,6 +90,7 @@ module.exports = {
     // Doc: https://github.com/nuxt-community/dotenv-module
     '@nuxtjs/dotenv',
     '@nuxtjs/vuetify',
+    'nuxt-i18n',
   ],
 
   /*
@@ -113,6 +114,25 @@ module.exports = {
     directivePlugins: ['Tooltip'],
   },
 
+  i18n: {
+    baseUrl: 'https://daim.dev',
+    seo: true,
+    defaultLocale: 'en',
+    vueI18n: {
+      fallbackLocale: 'en',
+    },
+    locales: [
+      {
+        code: 'en',
+        name: 'English',
+        iso: 'en-AU',
+        file: 'en-AU.js',
+      },
+    ],
+    lazy: true,
+    langDir: 'lang/',
+  },
+
   vuetify: {
     optionsPath: './vuetify.options.js',
     // customVariables: ['~/assets/scss/vuetify.scss'],

pages/index.vue

@@ -13,36 +13,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
-}
-</style>