Merge pull request #8 from kabaluyot/feature/upgrade-nuxt

build: upgrade nuxt; migrate to runtime config

.babelrc

@@ -1,16 +1,17 @@
 {
-  "env": {
-    "test": {
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "targets": {
-              "node": "current"
+    "env": {
+      "test": {
+        "presets": [
+          [
+            "@babel/preset-env",
+            {
+              "targets": {
+                "node": "current"
+              }
             }
-          }
+          ]
         ]
-      ]
+      }
     }
   }
-}
+  

.eslintrc.js

@@ -55,6 +55,7 @@ module.exports = {
         'repository.ts',
         '*.repository.ts',
         'test/**/*',
+        '*.d.ts',
       ],
       rules: {
         '@typescript-eslint/no-explicit-any': 'off',

api/social/social.repository.ts

@@ -15,9 +15,7 @@ export default ($axios: AxiosInstance) => ({
       .then((response: AxiosResponse<CommentInterface[]>) => {
         const { data } = response
 
-        const comments: CommentInterface[] = data
-
-        return comments
+        return data
       })
       .catch((error: AxiosError) => {
         throw error

nuxt.config.js

@@ -1,7 +1,6 @@
-require('dotenv').config()
-
 export default {
   ssr: true,
+  target: 'static',
   server: {
     port: process.env.APP_PORT,
     host: process.env.APP_HOST,
@@ -66,7 +65,7 @@ export default {
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: [{ src: '~/plugins/repository', mode: 'client' }],
+  plugins: [{ src: '~/plugins/repository', ssr: false }],
   /*
    ** Nuxt.js dev-modules
    */
@@ -83,9 +82,17 @@ export default {
     // Doc: https://axios.nuxtjs.org/usage
     '@nuxtjs/axios',
     '@nuxtjs/pwa',
-    // Doc: https://github.com/nuxt-community/dotenv-module
-    '@nuxtjs/dotenv',
   ],
+  /**
+   * Public runtime configs
+   */
+  publicRuntimeConfig: {
+    appName: process.env.APP_NAME,
+  },
+  /**
+   * Private runtime configs
+   */
+  privateRuntimeConfig: {},
   /*
    ** Axios module configuration
    ** See https://axios.nuxtjs.org/options

package.json

@@ -5,10 +5,10 @@
   "author": "Karl Anthony Baluyot",
   "private": true,
   "scripts": {
-    "dev": "nuxt-ts",
-    "build": "nuxt-ts build",
-    "generate": "nuxt-ts generate",
-    "start": "nuxt-ts start",
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "start": "nuxt start",
     "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
     "lint:fix": "eslint --ext .ts,.js,.vue --fix --ignore-path .gitignore .",
     "test:unit": "jest -- test/unit/*.spec.ts"
@@ -23,30 +23,32 @@
     }
   },
   "dependencies": {
+    "@babel/core": "7.13.15",
+    "@babel/preset-env": "7.13.15",
     "@nuxt/typescript-runtime": "^2.0.0",
     "@nuxtjs/axios": "^5.11.0",
-    "@nuxtjs/dotenv": "^1.4.0",
     "@nuxtjs/pwa": "^3.0.0-0",
     "@types/jest": "^26.0.15",
     "babel-core": "^7.0.0-bridge.0",
-    "nuxt": "^2.13.0",
-    "nuxt-property-decorator": "^2.7.2"
+    "nuxt": "^2.15.4",
+    "nuxt-property-decorator": "^2.7.2",
+    "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
     "@nuxt/types": "^2.13.0",
     "@nuxt/typescript-build": "^2.0.3",
-    "@nuxtjs/eslint-config-typescript": "^5.0.0",
+    "@nuxtjs/eslint-config-typescript": "^6.0.0",
     "@nuxtjs/eslint-module": "^3.0.1",
     "@nuxtjs/stylelint-module": "^4.0.0",
     "@nuxtjs/vuetify": "^1.11.2",
     "@vue/test-utils": "^1.0.0-beta.27",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^26.6.3",
     "eslint": "^7.14.0",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-nuxt": ">=0.4.2",
     "eslint-plugin-prettier": "^3.1.4",
-    "husky": "^4.0.0",
+    "husky": "^6.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^10.2.11",
     "prettier": "^2.2.1",

pages/index.vue

@@ -93,6 +93,9 @@ export default class Index extends Vue {
 
     // mutate in vuex
     this.global_set_title('Hello from daks.ts')
+
+    // print values using runtime config
+    console.log('APP_NAME', this.$config.appName)
   }
 }
 </script>

types/repository.d.ts → types/vue-types.d.ts

@@ -5,5 +5,8 @@ declare module 'vue/types/vue' {
     $socialRepository: {
       GetComments: () => Promise<CommentInterface[]>
     }
+
+    // nuxt runtime
+    $config: any
   }
 }