Installing MirageJS

- Added axios configuration - Added miragejs to mock api calls
2026-01-11 19:04:27 +00:00 · 2020-11-09 20:55:10 +00:00
parent ed696b62a2
commit fe1a5d77c3
6 changed files with 246 additions and 0 deletions
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -332,6 +332,7 @@
                      href="#"
                      class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
                      role="menuitem"
+                      @click="logout"
                      >Logout</a
                    >
                  </div>
@@ -623,6 +624,7 @@
                        href="#"
                        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
                        role="menuitem"
+                        @click="logout"
                        >Logout</a
                      >
                    </div>
@@ -656,6 +658,8 @@ export default {
    const token = await this.$magic.user.getIdToken()
    this.$store.commit('auth/setToken', token)
    this.$store.commit('auth/setLoggedIn', loggedIn)
+    const d = await this.$api.$get('/api/movies')
+    console.log({ d })
  },
  methods: {
    toggleUserMenu() {
@@ -664,6 +668,11 @@ export default {
    toggleSidebar() {
      this.sidebarToggled = !this.sidebarToggled
    },
+    async logout() {
+      await this.$magic.user.logout()
+      this.$store.commit('auth/setToken', null)
+      this.$store.commit('auth/setLoggedIn', false)
+    },
  },
 }
 </script>
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -17,6 +17,8 @@ export default {
  plugins: [
    { src: '~/plugins/magic.js', mode: 'client' },
    { src: '~/plugins/vue-splide.js', mode: 'client' },
+    { src: '~/plugins/mirage.js', mode: 'client' },
+    { src: '~/plugins/axios.js', mode: 'client' },
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
@@ -45,5 +47,6 @@ export default {
  build: {},
  env: {
    magicPublicKey: process.env.NUXT_ENV_PUBLIC_MAGIC_KEY,
+    baseApiUrl: process.env.NUXT_ENV_BASE_API_URL,
  },
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -1155,6 +1155,12 @@
      "resolved": "https://registry.npmjs.org/@magic-sdk/types/-/types-2.0.1.tgz",
      "integrity": "sha512-VB7h0i7et7fu5WViZZQz+b/CHUcTuLxC64Wbd+d1f6+dJyPFpUeWRkt5X9LP48pIVmZpz57NQB48/y7YKy91uw=="
    },
+    "@miragejs/pretender-node-polyfill": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz",
+      "integrity": "sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==",
+      "dev": true
+    },
    "@nodelib/fs.scandir": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -5869,6 +5875,12 @@
        }
      }
    },
+    "fake-xml-http-request": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/fake-xml-http-request/-/fake-xml-http-request-2.1.1.tgz",
+      "integrity": "sha512-Kn2WYYS6cDBS5jq/voOfSGCA0TafOYAUPbEp8mUVpD/DVV5bQIDjlq+MLLvNUokkbTpjBVlLDaM5PnX+PwZMlw==",
+      "dev": true
+    },
    "fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7008,6 +7020,12 @@
      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
    },
+    "inflected": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/inflected/-/inflected-2.1.0.tgz",
+      "integrity": "sha512-hAEKNxvHf2Iq3H60oMBHkB4wl5jn3TPF3+fXek/sRwAB5gP9xWs4r7aweSF95f99HFoz69pnZTcu8f0SIHV18w==",
+      "dev": true
+    },
    "inflight": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -7894,22 +7912,136 @@
      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
    },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+      "dev": true
+    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
+    "lodash.compact": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.compact/-/lodash.compact-3.0.1.tgz",
+      "integrity": "sha1-VAzjg3dFl1gHRx4WtKK6IeclbKU=",
+      "dev": true
+    },
+    "lodash.find": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.find/-/lodash.find-4.6.0.tgz",
+      "integrity": "sha1-ywcE1Hq3F4n/oN6Ll92Sb7iLE7E=",
+      "dev": true
+    },
+    "lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=",
+      "dev": true
+    },
+    "lodash.forin": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.forin/-/lodash.forin-4.4.0.tgz",
+      "integrity": "sha1-XT8grlZAEfvog4H32YlJyclRlzE=",
+      "dev": true
+    },
    "lodash.get": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
      "dev": true
    },
+    "lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI=",
+      "dev": true
+    },
+    "lodash.invokemap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz",
+      "integrity": "sha1-F0jNpdiw74NpxOs+xUwh/rofLWI=",
+      "dev": true
+    },
+    "lodash.isempty": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
+      "integrity": "sha1-b4bL7di+TsmHvpqvM8loTbGzHn4=",
+      "dev": true
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
+      "dev": true
+    },
+    "lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
+      "dev": true
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=",
+      "dev": true
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
+      "dev": true
+    },
    "lodash.kebabcase": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
      "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
    },
+    "lodash.lowerfirst": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/lodash.lowerfirst/-/lodash.lowerfirst-4.3.1.tgz",
+      "integrity": "sha1-3jx7EuAsZSSgBZwvbLfFxSZVoT0=",
+      "dev": true
+    },
+    "lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=",
+      "dev": true
+    },
+    "lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=",
+      "dev": true
+    },
    "lodash.memoize": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
    },
+    "lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=",
+      "dev": true
+    },
+    "lodash.snakecase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
+      "integrity": "sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40=",
+      "dev": true
+    },
    "lodash.template": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -7938,6 +8070,18 @@
      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
    },
+    "lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=",
+      "dev": true
+    },
+    "lodash.values": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.values/-/lodash.values-4.3.0.tgz",
+      "integrity": "sha1-o6bCsOvsxcLLocF+bmIP6BtT00c=",
+      "dev": true
+    },
    "lodash.zip": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/lodash.zip/-/lodash.zip-4.2.0.tgz",
@@ -8363,6 +8507,40 @@
        "minipass": "^3.0.0"
      }
    },
+    "miragejs": {
+      "version": "0.1.41",
+      "resolved": "https://registry.npmjs.org/miragejs/-/miragejs-0.1.41.tgz",
+      "integrity": "sha512-ur8x7sBskgey64vdzKGVCVC3hgKXWl2Cg5lZbxd6OmKrhr9LCCP/Bv7qh4wsQxIMHZnENxybFATXnrQ+rzSOWQ==",
+      "dev": true,
+      "requires": {
+        "@miragejs/pretender-node-polyfill": "^0.1.0",
+        "inflected": "^2.0.4",
+        "lodash.assign": "^4.2.0",
+        "lodash.camelcase": "^4.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.compact": "^3.0.1",
+        "lodash.find": "^4.6.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.forin": "^4.4.0",
+        "lodash.get": "^4.4.2",
+        "lodash.has": "^4.5.2",
+        "lodash.invokemap": "^4.6.0",
+        "lodash.isempty": "^4.4.0",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.lowerfirst": "^4.3.1",
+        "lodash.map": "^4.6.0",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.pick": "^4.4.0",
+        "lodash.snakecase": "^4.1.1",
+        "lodash.uniq": "^4.5.0",
+        "lodash.uniqby": "^4.7.0",
+        "lodash.values": "^4.3.0",
+        "pretender": "^3.4.3"
+      }
+    },
    "mississippi": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -10225,6 +10403,16 @@
      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
    },
+    "pretender": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/pretender/-/pretender-3.4.3.tgz",
+      "integrity": "sha512-AlbkBly9R8KR+R0sTCJ/ToOeEoUMtt52QVCetui5zoSmeLOU3S8oobFsyPLm1O2txR6t58qDNysqPnA1vVi8Hg==",
+      "dev": true,
+      "requires": {
+        "fake-xml-http-request": "^2.1.1",
+        "route-recognizer": "^0.3.3"
+      }
+    },
    "prettier": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
@@ -10895,6 +11083,12 @@
        "inherits": "^2.0.1"
      }
    },
+    "route-recognizer": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz",
+      "integrity": "sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==",
+      "dev": true
+    },
    "run-async": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
    "eslint-plugin-prettier": "^3.1.4",
    "husky": "^4.3.0",
    "lint-staged": "^10.4.0",
+    "miragejs": "^0.1.41",
    "prettier": "^2.1.2"
  }
 }
--- a/plugins/axios.js
+++ b/plugins/axios.js
@@ -0,0 +1,16 @@
+export default function ({ $axios }, inject) {
+  // Create a custom axios instance
+  const api = $axios.create({
+    headers: {
+      common: {
+        Accept: 'text/plain, */*',
+      },
+    },
+  })
+
+  // Set baseURL to something different
+  api.setBaseURL(process.env.baseApiUrl)
+
+  // Inject to context as $api
+  inject('api', api)
+}
--- a/plugins/mirage.js
+++ b/plugins/mirage.js
@@ -0,0 +1,23 @@
+import { createServer } from 'miragejs'
+
+if (process.env.NODE_ENV === 'development') {
+  startServer(0)
+}
+
+function startServer() {
+  createServer({
+    routes() {
+      this.namespace = 'api'
+
+      this.get('/movies', () => {
+        return {
+          movies: [
+            { id: 1, name: 'Inception', year: 2010 },
+            { id: 2, name: 'Interstellar', year: 2014 },
+            { id: 3, name: 'Dunkirk', year: 2017 },
+          ],
+        }
+      })
+    },
+  })
+}