fix: broken component import in prod

components/app/GitHubStarButton.vue

@@ -19,9 +19,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import GithubButton from "vue-github-button"
 
-export default {
+export default defineComponent({
   components: {
     GithubButton,
   },
@@ -31,5 +32,5 @@ export default {
       default: undefined,
     },
   },
-}
+})
 </script>

components/app/Search.vue

@@ -75,10 +75,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { invokeAction } from "~/helpers/actions"
 import { spotlight } from "~/helpers/shortcuts"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -107,7 +108,7 @@ export default {
       invokeAction(command, "path_from_invokeAction")
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>

components/app/Section.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     label: {
       type: String,

components/app/Share.vue

@@ -35,8 +35,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-export default {
+
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -95,7 +97,7 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>

components/app/Shortcuts.vue

@@ -81,9 +81,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import shortcuts from "~/helpers/shortcuts"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -103,7 +104,7 @@ export default {
       this.$emit("close")
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>

components/app/SlideOver.vue

@@ -35,7 +35,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: {
       type: Boolean,
@@ -64,5 +66,5 @@ export default {
       this.$emit("close")
     },
   },
-}
+})
 </script>

components/app/Support.vue

@@ -74,10 +74,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { invokeAction } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -92,5 +93,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/Add.vue

@@ -32,7 +32,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -57,5 +59,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/AddFolder.vue

@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     folder: { type: Object, default: () => {} },
@@ -65,5 +67,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/Edit.vue

@@ -32,7 +32,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     placeholderCollName: { type: String, default: null },
@@ -58,5 +60,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/EditFolder.vue

@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -58,5 +60,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/EditRequest.vue

@@ -29,7 +29,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     placeholderReqName: { type: String, default: null },
@@ -57,5 +59,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/Add.vue

@@ -32,10 +32,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { addGraphqlCollection } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
   },

components/collections/graphql/AddFolder.vue

@@ -33,9 +33,9 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
     folderPath: { type: String, default: null },

components/collections/graphql/Collection.vue

@@ -153,13 +153,13 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   removeGraphqlCollection,
   moveGraphqlRequest,
 } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     picked: { type: Object, default: null },
     // Whether the viewing context is related to picking (activates 'select' events)

components/collections/graphql/Edit.vue

@@ -32,10 +32,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { editGraphqlCollection } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
     editingCollection: { type: Object, default: () => {} },
@@ -55,7 +55,7 @@ export default Vue.extend({
         return
       }
       const collectionUpdated = {
-        ...this.$props.editingCollection,
+        ...(this.editingCollection as any),
         name: this.name,
       }
 

components/collections/graphql/EditFolder.vue

@@ -33,10 +33,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { editGraphqlFolder } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
     folder: { type: Object, default: () => {} },
@@ -44,7 +44,7 @@ export default Vue.extend({
   },
   data() {
     return {
-      name: null,
+      name: "",
     }
   },
   methods: {
@@ -55,11 +55,14 @@ export default Vue.extend({
         })
         return
       }
-      editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name })
+      editGraphqlFolder(this.folderPath, {
+        ...(this.folder as any),
+        name: this.name,
+      })
       this.hideModal()
     },
     hideModal() {
-      this.name = null
+      this.name = ""
       this.$emit("hide-modal")
     },
   },

components/collections/graphql/EditRequest.vue

@@ -29,10 +29,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { editGraphqlRequest } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
     folderPath: { type: String, default: null },

components/collections/graphql/Folder.vue

@@ -152,10 +152,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   name: "Folder",
   props: {
     picked: { type: Object, default: null },

components/collections/graphql/Request.vue

@@ -97,11 +97,11 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { setGQLSession } from "~/newstore/GQLSession"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     // Whether the object is selected (show the tick mark)
     picked: { type: Object, default: null },

components/collections/index.vue

@@ -181,6 +181,8 @@
 import gql from "graphql-tag"
 import cloneDeep from "lodash/cloneDeep"
 import { defineComponent } from "@nuxtjs/composition-api"
+import CollectionsMyCollection from "./my/Collection.vue"
+import CollectionsTeamsCollection from "./teams/Collection.vue"
 import { currentUser$ } from "~/helpers/fb/auth"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
 import * as teamUtils from "~/helpers/teams/utils"
@@ -200,6 +202,10 @@ import {
 } from "~/helpers/utils/composables"
 
 export default defineComponent({
+  components: {
+    CollectionsMyCollection,
+    CollectionsTeamsCollection,
+  },
   props: {
     doc: Boolean,
     selected: { type: Array, default: () => [] },

components/collections/my/Collection.vue

@@ -178,9 +178,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { moveRESTRequest } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     collectionIndex: { type: Number, default: null },
     collection: { type: Object, default: () => {} },
@@ -247,5 +248,5 @@ export default {
       moveRESTRequest(folderPath, requestIndex, this.collectionIndex.toString())
     },
   },
-}
+})
 </script>

components/collections/my/Folder.vue

@@ -161,13 +161,14 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   removeRESTFolder,
   removeRESTRequest,
   moveRESTRequest,
 } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   name: "Folder",
   props: {
     folder: { type: Object, default: () => {} },
@@ -252,5 +253,5 @@ export default {
       removeRESTRequest(this.folderPath, requestIndex)
     },
   },
-}
+})
 </script>

components/collections/teams/Collection.vue

@@ -107,7 +107,7 @@
     <div v-if="showChildren || isFiltered">
       <CollectionsTeamsFolder
         v-for="(folder, index) in collection.children"
-        :key="`folder-${folder}`"
+        :key="`folder-${index}`"
         class="border-l border-dividerLight ml-6"
         :folder="folder"
         :folder-index="index"
@@ -174,7 +174,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     collectionIndex: { type: Number, default: null },
     collection: { type: Object, default: () => {} },
@@ -251,5 +253,5 @@ export default {
       })
     },
   },
-}
+})
 </script>

components/collections/teams/Folder.vue

@@ -156,9 +156,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import * as teamUtils from "~/helpers/teams/utils"
 
-export default {
+export default defineComponent({
   name: "Folder",
   props: {
     folder: { type: Object, default: () => {} },
@@ -246,5 +247,5 @@ export default {
       })
     },
   },
-}
+})
 </script>

components/docs/Collection.vue

@@ -21,11 +21,13 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     collection: { type: Object, default: () => {} },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/docs/Folder.vue

@@ -17,11 +17,13 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     folder: { type: Object, default: () => {} },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/docs/Request.vue

@@ -111,11 +111,13 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     request: { type: Object, default: () => {} },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/environments/Add.vue

@@ -32,10 +32,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { createEnvironment } from "~/newstore/environments"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
   },

components/environments/Environment.vue

@@ -61,11 +61,10 @@
 </template>
 
 <script lang="ts">
-import { PropType } from "@nuxtjs/composition-api"
-import Vue from "vue"
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
 import { deleteEnvironment } from "~/newstore/environments"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     environment: { type: Object, default: () => {} },
     environmentIndex: {

components/firebase/Login.vue

@@ -119,6 +119,7 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { applySetting } from "~/newstore/settings"
 import {
   signInUserWithGoogle,
@@ -132,7 +133,7 @@ import {
 import { setLocalConfig } from "~/newstore/localpersistence"
 import { useStreamSubscriber } from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -358,5 +359,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/firebase/Logout.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { signOutUser } from "~/helpers/fb/auth"
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       confirmLogout: false,

components/graphql/Field.vue

@@ -64,7 +64,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     gqlField: { type: Object, default: () => {} },
     jumpTypeCallback: { type: Function, default: () => {} },
@@ -79,7 +81,7 @@ export default {
       return this.gqlField.args || []
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/graphql/QueryEditor.vue

@@ -11,10 +11,11 @@ import "ace-builds/src-noconflict/ext-language_tools"
 import "ace-builds/src-noconflict/mode-graphqlschema"
 import * as gql from "graphql"
 import { getAutocompleteSuggestions } from "graphql-language-service-interface"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
 import debounce from "~/helpers/utils/debounce"
 
-export default {
+export default defineComponent({
   props: {
     value: {
       type: String,
@@ -237,7 +238,7 @@ export default {
       }
     }, 2000),
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/graphql/Type.vue

@@ -56,13 +56,14 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   GraphQLEnumType,
   GraphQLInputObjectType,
   GraphQLInterfaceType,
 } from "graphql"
 
-export default {
+export default defineComponent({
   props: {
     // eslint-disable-next-line vue/require-default-prop, vue/require-prop-types
     gqlType: {},
@@ -96,7 +97,7 @@ export default {
       return !!this.highlightedFields.find(({ name }) => name === field.name)
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/graphql/TypeLink.vue

@@ -8,9 +8,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { GraphQLScalarType } from "graphql"
 
-export default {
+export default defineComponent({
   props: {
     // eslint-disable-next-line vue/require-default-prop
     gqlType: null,
@@ -39,5 +40,5 @@ export default {
       return t
     },
   },
-}
+})
 </script>

components/http/ResponseMeta.vue

@@ -103,10 +103,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 
-export default {
+export default defineComponent({
   props: {
     response: {
       type: Object,
@@ -121,7 +122,7 @@ export default {
   methods: {
     getSpecialKey: getPlatformSpecialKey,
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>

components/landing/CTA.vue

@@ -37,7 +37,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       ctas: [
@@ -74,5 +76,5 @@ export default {
       ],
     }
   },
-}
+})
 </script>

components/landing/Features.vue

@@ -30,7 +30,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       features: [
@@ -79,5 +81,5 @@ export default {
       ],
     }
   },
-}
+})
 </script>

components/landing/Footer.vue

@@ -62,7 +62,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       navigation: {
@@ -151,7 +153,7 @@ export default {
       },
     }
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/landing/Hero.vue

@@ -59,11 +59,13 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       showLogin: false,
     }
   },
-}
+})
 </script>

components/landing/Stats.vue

@@ -13,7 +13,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       stats: [
@@ -23,5 +25,5 @@ export default {
       ],
     }
   },
-}
+})
 </script>

components/landing/Users.vue

@@ -21,7 +21,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       users: [
@@ -40,5 +42,5 @@ export default {
       ],
     }
   },
-}
+})
 </script>

components/lenses/HeadersRenderer.vue

@@ -70,9 +70,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default {
+export default defineComponent({
   props: {
     headers: { type: Array, default: () => [] },
   },
@@ -91,5 +92,5 @@ export default {
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
-}
+})
 </script>

components/lenses/ResponseBodyRenderer.vue

@@ -24,9 +24,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
 
-export default {
+export default defineComponent({
   components: {
     // Lens Renderers
     ...getLensRenderers(),
@@ -46,5 +47,5 @@ export default {
       return getSuitableLenses(this.response)
     },
   },
-}
+})
 </script>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -69,10 +69,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default {
+export default defineComponent({
   mixins: [TextContentRendererMixin],
   props: {
     response: { type: Object, default: () => {} },
@@ -136,7 +137,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>

components/lenses/renderers/ImageLensRenderer.vue

@@ -37,7 +37,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     response: { type: Object, default: () => {} },
   },
@@ -111,5 +113,5 @@ export default {
       }, 1000)
     },
   },
-}
+})
 </script>

components/lenses/renderers/JSONLensRenderer.vue

@@ -55,10 +55,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default {
+export default defineComponent({
   mixins: [TextContentRendererMixin],
   props: {
     response: { type: Object, default: () => {} },
@@ -118,5 +119,5 @@ export default {
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
-}
+})
 </script>

components/lenses/renderers/RawLensRenderer.vue

@@ -54,10 +54,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default {
+export default defineComponent({
   mixins: [TextContentRendererMixin],
   props: {
     response: { type: Object, default: () => {} },
@@ -110,5 +111,5 @@ export default {
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
-}
+})
 </script>

components/lenses/renderers/XMLLensRenderer.vue

@@ -54,10 +54,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default {
+export default defineComponent({
   mixins: [TextContentRendererMixin],
   props: {
     response: { type: Object, default: () => {} },
@@ -109,5 +110,5 @@ export default {
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
-}
+})
 </script>

components/profile/Picture.vue

@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     url: {
       type: String,
@@ -54,5 +56,5 @@ export default {
       default: "bg-green-500",
     },
   },
-}
+})
 </script>

components/realtime/Log.vue

@@ -33,9 +33,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { getSourcePrefix } from "~/helpers/utils/string"
 
-export default {
+export default defineComponent({
   props: {
     log: { type: Array, default: () => [] },
     title: {
@@ -53,7 +54,7 @@ export default {
   methods: {
     getSourcePrefix,
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/realtime/Sse.vue

@@ -85,12 +85,13 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"
 
-export default {
+export default defineComponent({
   components: { Splitpanes, Pane },
   data() {
     return {
@@ -232,5 +233,5 @@ export default {
       this.sse.onclose()
     },
   },
-}
+})
 </script>

components/smart/AceEditor.vue

@@ -57,11 +57,12 @@
 <script>
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
+import { defineComponent } from "@nuxtjs/composition-api"
 import jsonParse from "~/helpers/jsonParse"
 import debounce from "~/helpers/utils/debounce"
 import outline from "~/helpers/outline"
 
-export default {
+export default defineComponent({
   props: {
     provideOutline: {
       type: Boolean,
@@ -265,7 +266,7 @@ export default {
       }
     }),
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/smart/Anchor.vue

@@ -31,7 +31,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -70,5 +72,5 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>

components/smart/AutoComplete.vue

@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     spellcheck: {
       type: Boolean,
@@ -181,7 +183,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/smart/ConfirmModal.vue

@@ -17,7 +17,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     title: { type: String, default: null },
@@ -43,5 +45,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/smart/Icon.vue

@@ -3,7 +3,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     name: {
       type: String,
@@ -15,5 +17,5 @@ export default {
       return require(`~/assets/icons/${this.name}.svg?inline`)
     },
   },
-}
+})
 </script>

components/smart/Intersection.vue

@@ -12,9 +12,9 @@
   ------
   intersecting (entry: IntersectionObserverEntry) -> When the component is intersecting the viewport
 */
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       observer: null as IntersectionObserver | null,

components/smart/Item.vue

@@ -76,7 +76,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -135,5 +137,5 @@ export default {
       default: "",
     },
   },
-}
+})
 </script>

components/smart/JsEditor.vue

@@ -10,6 +10,7 @@ import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/ext-language_tools"
 import "ace-builds/src-noconflict/mode-graphqlschema"
 import * as esprima from "esprima"
+import { defineComponent } from "@nuxtjs/composition-api"
 import debounce from "~/helpers/utils/debounce"
 import {
   getPreRequestScriptCompletions,
@@ -18,7 +19,7 @@ import {
   performTestLinting,
 } from "~/helpers/tern"
 
-export default {
+export default defineComponent({
   props: {
     value: {
       type: String,
@@ -275,7 +276,7 @@ export default {
         })
     }, 2000),
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/smart/ProgressRing.vue

@@ -22,7 +22,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     radius: {
       type: Number,
@@ -51,5 +53,5 @@ export default {
       return this.circumference - (this.progress / 100) * this.circumference
     },
   },
-}
+})
 </script>

components/smart/Tab.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     label: { type: String, default: null },
     info: { type: String, default: null },
@@ -26,5 +28,5 @@ export default {
   mounted() {
     this.active = this.selected
   },
-}
+})
 </script>

components/smart/Tabs.vue

@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     styles: {
       type: String,
@@ -59,7 +61,7 @@ export default {
       this.$emit("tab-changed", id)
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/smart/Toggle.vue

@@ -13,14 +13,16 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     on: {
       type: Boolean,
       default: false,
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/tab/Primary.vue

@@ -39,7 +39,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -78,5 +80,5 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>

components/tab/Secondary.vue

@@ -48,7 +48,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -87,5 +89,5 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>

components/teams/Add.vue

@@ -29,9 +29,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import * as teamUtils from "~/helpers/teams/utils"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -76,5 +77,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/teams/Team.vue

@@ -64,9 +64,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import * as teamUtils from "~/helpers/teams/utils"
 
-export default {
+export default defineComponent({
   props: {
     team: { type: Object, default: () => {} },
     teamID: { type: String, default: null },
@@ -106,5 +107,5 @@ export default {
         })
     },
   },
-}
+})
 </script>

helpers/fb/history.ts

@@ -5,9 +5,11 @@ import { settingsStore } from "~/newstore/settings"
 import {
   graphqlHistoryStore,
   HISTORY_LIMIT,
+  RESTHistoryEntry,
   restHistoryStore,
   setGraphqlHistoryEntries,
   setRESTHistoryEntries,
+  translateToNewRESTHistory,
 } from "~/newstore/history"
 
 type HistoryFBCollections = "history" | "graphqlHistory"
@@ -167,12 +169,12 @@ export function initHistory() {
         .orderBy("updatedOn", "desc")
         .limit(HISTORY_LIMIT)
         .onSnapshot((historyRef) => {
-          const history: any[] = []
+          const history: RESTHistoryEntry[] = []
 
           historyRef.forEach((doc) => {
             const entry = doc.data()
             entry.id = doc.id
-            history.push(entry)
+            history.push(translateToNewRESTHistory(entry))
           })
 
           loadedRESTHistory = false

helpers/types/HoppRESTRequest.ts

@@ -33,6 +33,7 @@ export type HoppRESTReqBody =
   | HoppRESTReqBodyFormData
   | {
       contentType: null
+      body: null
     }
 
 export interface HoppRESTRequest {

layouts/error.vue

@@ -6,7 +6,7 @@
       <ButtonSecondary to="/" icon="home" outline :label="$t('app.home')" />
       <ButtonSecondary
         icon="refresh"
-        :label="$t('reload')"
+        :label="$t('app.reload')"
         outline
         @click.native="reloadApplication"
       />
@@ -15,9 +15,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { initializeFirebase } from "~/helpers/fb"
 
-export default {
+export default defineComponent({
   props: {
     error: {
       type: Object,
@@ -43,7 +44,7 @@ export default {
       window.location.reload()
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

newstore/RESTSession.ts

@@ -38,6 +38,7 @@ export const defaultRESTRequest: HoppRESTRequest = {
   testScript: "",
   body: {
     contentType: null,
+    body: null,
   },
 }
 
@@ -224,8 +225,8 @@ const dispatchers = defineDispatchers({
               contentType: newContentType,
               body:
                 newContentType === null
-                  ? undefined
-                  : (curr.request.body as any).body,
+                  ? null
+                  : (curr.request.body as any)?.body ?? "",
             },
           },
         }

pages/enter.vue

@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { initializeFirebase } from "~/helpers/fb"
 import { isSignInWithEmailLink, signInWithEmailLink } from "~/helpers/fb/auth"
 import { getLocalConfig, removeLocalConfig } from "~/newstore/localpersistence"
 
-export default Vue.extend({
+export default defineComponent({
   layout: "empty",
   data() {
     return {

pages/realtime.vue

@@ -36,11 +36,13 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   head() {
     return {
       title: `${this.$t("navigation.realtime")} • Hoppscotch`,
     }
   },
-}
+})
 </script>