Basic setup of Axios module + Test Ghibli API connection

2020-12-16 13:17:14 +01:00
parent 80b7c19e27
commit 1278e23aec
4 changed files with 156 additions and 2 deletions
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -36,7 +36,18 @@ export default {
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
-  modules: [],
+  modules: ["@nuxtjs/axios"],
+
+  axios: {
+    proxy: true
+  },
+
+  proxy: {
+    "/api/": {
+      target: "https://ghibliapi.herokuapp.com",
+      pathRewrite: { "^/api/": "" }
+    }
+  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {}
--- a/package-lock.json
+++ b/package-lock.json
@@ -2243,6 +2243,33 @@
        "webpackbar": "^4.0.0"
      }
    },
+    "@nuxtjs/axios": {
+      "version": "5.12.4",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.12.4.tgz",
+      "integrity": "sha512-NKDIkrhtteOwC163Qlglw7YyjWHfLecpC/wXax4Z2tVVDlYnvSBa1KGoH9AnDY30lfvi0gjBKWCcTnUY8PaWDA==",
+      "requires": {
+        "@nuxtjs/proxy": "^2.1.0",
+        "axios": "^0.21.0",
+        "axios-retry": "^3.1.9",
+        "consola": "^2.15.0",
+        "defu": "^3.2.2"
+      },
+      "dependencies": {
+        "defu": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/defu/-/defu-3.2.2.tgz",
+          "integrity": "sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ=="
+        }
+      }
+    },
+    "@nuxtjs/proxy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-2.1.0.tgz",
+      "integrity": "sha512-/qtoeqXgZ4Mg6LRg/gDUZQrFpOlOdHrol/vQYMnKu3aN3bP90UfOUB3QSDghUUK7OISAJ0xp8Ld78aHyCTcKCQ==",
+      "requires": {
+        "http-proxy-middleware": "^1.0.6"
+      }
+    },
    "@nuxtjs/tailwindcss": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-3.3.4.tgz",
@@ -2395,6 +2422,14 @@
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
      "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA=="
    },
+    "@types/http-proxy": {
+      "version": "1.17.4",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz",
+      "integrity": "sha512-IrSHl2u6AWXduUaDLqYpt45tLVCtYv7o4Z0s1KghBCDgIIS9oW5K1H8mZG/A2CfeLdEa7rTd1ACOiHBc1EMT2Q==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
    "@types/istanbul-lib-coverage": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -3194,6 +3229,22 @@
      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
      "dev": true
    },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
+    "axios-retry": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.1.9.tgz",
+      "integrity": "sha512-NFCoNIHq8lYkJa6ku4m+V1837TP6lCa7n79Iuf8/AqATAHYB0ISaAS1eyIenDOfHOLtym34W65Sjke2xjg2fsA==",
+      "requires": {
+        "is-retry-allowed": "^1.1.0"
+      }
+    },
    "babel-code-frame": {
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -5756,6 +5807,11 @@
      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
    "events": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/events/-/events-3.2.0.tgz",
@@ -6357,6 +6413,11 @@
        }
      }
    },
+    "follow-redirects": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
+      "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
+    },
    "for-in": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -7056,6 +7117,68 @@
        }
      }
    },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "requires": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-middleware": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.0.6.tgz",
+      "integrity": "sha512-NyL6ZB6cVni7pl+/IT2W0ni5ME00xR0sN27AQZZrpKn1b+qRh+mLbBxIq9Cq1oGfmTc7BUq4HB77mxwCaxAYNg==",
+      "requires": {
+        "@types/http-proxy": "^1.17.4",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "lodash": "^4.17.20",
+        "micromatch": "^4.0.2"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
    "http-signature": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -7523,6 +7646,11 @@
      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
    },
+    "is-retry-allowed": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
+      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
+    },
    "is-ssh": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/is-ssh/-/is-ssh-1.3.2.tgz",
@@ -12214,6 +12342,11 @@
      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
      "dev": true
    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
    "resolve": {
      "version": "1.19.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
    "test": "jest"
  },
  "dependencies": {
+    "@nuxtjs/axios": "^5.12.4",
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6"
  },
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,21 @@
 <template>
  <main>
    <h1>Ghibli movies</h1>
+    {{ films }}
  </main>
 </template>

 <script>
 export default {
-  name: "Movies"
+  name: "Movies",
+  data() {
+    return {
+      films: []
+    };
+  },
+  async mounted() {
+    this.films = await this.$axios.$get("/api/films");
+  }
 };
 </script>