fix: broken component import in prod

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>