build: update to latest version

Author: kabaluyot

.env.example

@@ -2,14 +2,14 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   extends: [
     '@nuxtjs/eslint-config-typescript',
     'prettier',
     'prettier/vue',
     'plugin:prettier/recommended',
-    'plugin:nuxt/recommended'
+    'plugin:nuxt/recommended',
   ],
   plugins: ['prettier'],
   // add your custom rules here
@@ -23,23 +23,29 @@ module.exports = {
       {
         vars: 'all',
         args: 'after-used',
-        ignoreRestSiblings: false
-      }
+        ignoreRestSiblings: false,
+      },
     ],
     '@typescript-eslint/member-delimiter-style': 0,
-    '@typescript-eslint/ban-ts-ignore': 'error',
+    '@typescript-eslint/ban-ts-comment': 'error',
     '@typescript-eslint/explicit-function-return-type': 'off', // disable default
     '@typescript-eslint/no-explicit-any': 'error',
     camelcase: 'off',
-    '@typescript-eslint/camelcase': ['warn']
+    '@typescript-eslint/naming-convention': [
+      'warn',
+      {
+        selector: 'variable',
+        format: ['camelCase'],
+      },
+    ],
   },
   overrides: [
     {
       // enable the rule specifically for TypeScript files
       files: ['*.ts', '*.tsx', '*.vue'],
       rules: {
-        '@typescript-eslint/explicit-function-return-type': ['error']
-      }
+        '@typescript-eslint/explicit-function-return-type': ['error'],
+      },
     },
     {
       // allow explicit any in these files and missing return type
@@ -48,12 +54,12 @@ module.exports = {
         'getters.ts',
         'repository.ts',
         '*.repository.ts',
-        'test/**/*'
+        'test/**/*',
       ],
       rules: {
         '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/explicit-function-return-type': ['off']
-      }
-    }
-  ]
+        '@typescript-eslint/explicit-function-return-type': ['off'],
+      },
+    },
+  ],
 }

.eslintrc.js

@@ -29,5 +29,5 @@ export default ($axios: AxiosInstance) => (resource: string): any => ({
 
   delete(id: string): any {
     return $axios.delete(`${resource}/${id}`)
-  }
+  },
 })

api/repository.ts

@@ -41,5 +41,5 @@ export default ($axios: AxiosInstance) => ({
       .catch((error: AxiosError) => {
         throw error
       })
-  }
+  },
 })

api/social/social.repository.ts

@@ -26,7 +26,7 @@
       </v-btn>
 
       <v-menu offset-y min-width="100vw">
-        <template v-slot:activator="{ on, attrs }">
+        <template #activator="{ on, attrs }">
           <v-btn
             color="primary"
             x-large
@@ -49,7 +49,7 @@
               class="ml-3 my-3"
               :class="[
                 { 'primary--text': activePage == page.name },
-                { 'accent--text': activePage != page.name }
+                { 'accent--text': activePage != page.name },
               ]"
               >{{ page.title }}
               <div
@@ -61,9 +61,7 @@
         </v-list>
       </v-menu>
       <v-spacer></v-spacer>
-      <v-btn color="primary" large class="font-weight-bold">
-        Login
-      </v-btn>
+      <v-btn color="primary" large class="font-weight-bold"> Login </v-btn>
     </v-app-bar>
   </div>
 </template>
@@ -77,43 +75,39 @@ interface Item {
   to: string
 }
 
-interface Route {
-  name: string
-}
-
 @Component
 export default class Header extends Vue {
   //  * Data
   pages: Item[] = [
     {
       name: 'index',
       title: 'Home',
-      to: '/'
+      to: '/',
     },
     {
       name: 'users',
       title: 'Users',
-      to: '/users'
+      to: '/users',
     },
     {
       name: 'about',
       title: 'About',
-      to: '/about'
-    }
+      to: '/about',
+    },
   ]
 
   // * * Computed
   /**
    * return currect active page
    */
   get activePage(): string {
-    if (this.$route.name === undefined || this.$route.name === null) {
+    if (this.$route?.name === undefined || this.$route?.name === null) {
       return ''
     }
-    if (this.$route.name === 'users-id') {
+    if (this.$route?.name === 'users-id') {
       return 'users'
     }
-    return this.$route.name
+    return this.$route?.name
   }
 
   // * * Methods

components/header/Header.vue

@@ -2,18 +2,18 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
     '^~/(.*)$': '<rootDir>/$1',
-    '^vue$': 'vue/dist/vue.common.js'
+    '^vue$': 'vue/dist/vue.common.js',
   },
   moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
   transform: {
     '^.+\\.ts$': 'ts-jest',
     '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    '.*\\.(vue)$': 'vue-jest',
   },
   collectCoverage: true,
   collectCoverageFrom: [
     '<rootDir>/components/**/*.vue',
-    '<rootDir>/pages/**/*.vue'
+    '<rootDir>/pages/**/*.vue',
   ],
-  setupFilesAfterEnv: ['./test/jest.setup.ts']
+  setupFilesAfterEnv: ['./test/jest.setup.ts'],
 }

jest.config.js

@@ -15,8 +15,8 @@ import { Header } from '~/components/header'
 @Component({
   components: {
     Header,
-    Footer
-  }
+    Footer,
+  },
 })
 export default class Default extends Vue {}
 </script>

layouts/default.vue

@@ -6,9 +6,7 @@
     <h1 v-else>
       {{ otherError }}
     </h1>
-    <NuxtLink to="/">
-      Home page
-    </NuxtLink>
+    <NuxtLink to="/"> Home page </NuxtLink>
   </v-app>
 </template>
 
@@ -23,9 +21,10 @@ interface ErrorResponse {
   layout: 'empty',
   head(this: Error): {} {
     return {
-      title: this.error.statusCode === 404 ? this.pageNotFound : this.otherError
+      title:
+        this.error.statusCode === 404 ? this.pageNotFound : this.otherError,
     }
-  }
+  },
 })
 export default class Error extends Vue {
   // props

layouts/error.vue

@@ -1,68 +1,69 @@
-require('dotenv').config()
-
 const DEBUG = process.env.NODE_ENV !== 'production'
+const APP_NAME = 'Nuxify'
+const APP_DESCRIPTION = "Writing Software Like It's Ours"
+const APP_URL = 'http://localhost:3000'
+
+const API_URL = DEBUG
+  ? 'https://jsonplaceholder.typicode.com'
+  : 'https://jsonplaceholder.typicode.com'
 
 export default {
   target: 'static',
-  mode: 'universal',
-  server: {
-    port: process.env.APP_PORT,
-    host: process.env.APP_HOST
-  },
+  ssr: true,
   /*
    ** Headers of the page
    */
   head: {
-    titleTemplate: '%s - ' + process.env.APP_NAME,
-    title: process.env.APP_NAME || '',
+    titleTemplate: '%s - ' + APP_NAME,
+    title: APP_NAME || '',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       {
         hid: 'description',
         name: 'description',
-        content: process.env.APP_DESCRIPTION || ''
+        content: APP_DESCRIPTION || '',
       },
       // OG Tag setup
       // https://vue-meta.nuxtjs.org/api/#meta
       {
         property: 'og:type',
         content: 'website',
-        vmid: 'og:type'
+        vmid: 'og:type',
       },
       {
         property: 'og:title',
-        content: process.env.APP_NAME,
-        vmid: 'og:title'
+        content: APP_NAME,
+        vmid: 'og:title',
       },
       {
         property: 'og:description',
-        content: process.env.APP_DESCRIPTION,
-        vmid: 'og:description'
+        content: APP_DESCRIPTION,
+        vmid: 'og:description',
       },
       {
         property: 'og:site_name',
-        content: process.env.APP_URL,
-        vmid: 'og:site_name'
+        content: APP_URL,
+        vmid: 'og:site_name',
       },
       {
         property: 'og:url',
-        content: process.env.APP_URL,
-        vmid: 'og:url'
+        content: APP_URL,
+        vmid: 'og:url',
       },
       {
         property: 'og:image',
-        content: process.env.APP_URL + '/icon.png',
-        vmid: 'og:image'
-      }
+        content: APP_URL + '/icon.png',
+        vmid: 'og:image',
+      },
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       {
         rel: 'stylesheet',
-        href: 'https://fonts.googleapis.com/css?family=Poppins&display=swap'
-      }
-    ]
+        href: 'https://fonts.googleapis.com/css?family=Poppins&display=swap',
+      },
+    ],
   },
   /*
    ** Customize the progress-bar color
@@ -83,7 +84,7 @@ export default {
     '@nuxt/typescript-build',
     // Doc: https://github.com/nuxt-community/stylelint-module
     '@nuxtjs/stylelint-module',
-    '@nuxtjs/vuetify'
+    '@nuxtjs/vuetify',
   ],
   /*
    ** Nuxt.js modules
@@ -93,42 +94,38 @@ export default {
     '@nuxtjs/axios',
     '@nuxtjs/pwa',
     // Doc: https://github.com/nuxt-community/dotenv-module
-    '@nuxtjs/dotenv'
+    '@nuxtjs/dotenv',
   ],
   /**
    *  PWA module configuration
    *  https://pwa.nuxtjs.org/setup.html
    */
   pwa: {
     meta: {
-      title: process.env.APP_NAME
+      title: APP_NAME,
     },
     manifest: {
-      name: process.env.APP_NAME,
-      // eslint-disable-next-line @typescript-eslint/camelcase
-      short_name: process.env.APP_NAME,
-      description: process.env.APP_DESCRIPTION,
-      // eslint-disable-next-line @typescript-eslint/camelcase
-      start_url: process.env.APP_URL,
-      lang: 'en'
-    }
+      name: APP_NAME,
+      short_name: APP_NAME,
+      description: APP_DESCRIPTION,
+      start_url: APP_URL,
+      lang: 'en',
+    },
   },
   /*
    ** Axios module configuration
    ** See https://axios.nuxtjs.org/options
    */
   axios: {
-    baseURL: DEBUG
-      ? process.env.STAGING_API_URL
-      : process.env.PRODUCTION_API_URL,
-    debug: DEBUG
+    baseURL: API_URL,
+    debug: DEBUG,
   },
   /*
    ** vuetify module configuration
    ** https://github.com/nuxt-community/vuetify-module
    */
   vuetify: {
     customVariables: ['~/assets/variables.scss'],
-    optionsPath: './vuetify.options.js'
-  }
+    optionsPath: './vuetify.options.js',
+  },
 }