feat(fe2): upgrade to nuxt 3.11 (#2145)

* feat(fe2): upgrade to nuxt 3.11

* linting fixes

packages/frontend-2/components/viewer/resources/VersionCard.vue

@@ -2,7 +2,7 @@
   <div
     :class="`bg-foundation group relative block w-full space-y-2 rounded-md pb-2 text-left transition ${
       clickable
-        ? 'hover:bg-gray-100 dark:hover:bg-gray-700'
+        ? 'hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer'
         : ' bg-primary-muted cursor-default'
     }
     ${isLoaded ? '' : ''}

packages/frontend-2/lib/common/composables/reactiveCookie.ts

@@ -1,4 +1,4 @@
-import type { CookieOptions } from '#app'
+import type { CookieOptions } from 'nuxt/dist/app/composables/cookie'
 import dayjs from 'dayjs'
 import { useScopedState } from '~~/lib/common/composables/scopedState'
 
@@ -12,9 +12,14 @@ export const useSynchronizedCookie = <CookieValue = string>(
   name: string,
   opts?: CookieOptions<CookieValue>
 ) =>
-  useScopedState(`synchronizedCookiesState-${name}`, () =>
-    useCookie<CookieValue>(name, {
+  useScopedState(`synchronizedCookiesState-${name}`, () => {
+    const finalOpts: CookieOptions<CookieValue> = {
       expires: dayjs().add(1, 'year').toDate(),
-      ...(opts || {})
-    })
-  )
+      ...(opts || {}),
+      readonly: false
+    }
+
+    // something's off with nuxt's types here, have to use any
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+    return useCookie<CookieValue>(name, finalOpts as any)
+  })

packages/frontend-2/lib/core/configs/apollo.ts

@@ -259,17 +259,17 @@ function createCache(): InMemoryCache {
   })
 }
 
-async function createWsClient(params: {
+function createWsClient(params: {
   wsEndpoint: string
   authToken: CookieRef<Optional<string>>
   reqId: string
-}): Promise<SubscriptionClient> {
+}): SubscriptionClient {
   const { wsEndpoint, authToken, reqId } = params
 
   // WS IN SSR DOESN'T WORK CURRENTLY CAUSE OF SOME NUXT TRANSPILATION WEIRDNESS
   // SO DON'T RUN createWsClient in SSR
   // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const wsImplementation = process.server ? (await import('ws')).default : undefined
+  // const wsImplementation = process.server ? (await import('ws')).default : undefined
   return new SubscriptionClient(
     wsEndpoint,
     {
@@ -280,8 +280,8 @@ async function createWsClient(params: {
           ? { Authorization, headers: { Authorization, 'x-request-id': reqId } }
           : {}
       }
-    },
-    wsImplementation
+    }
+    // wsImplementation
   )
 }
 
@@ -414,7 +414,7 @@ function createLink(params: {
   return from([...(process.server ? [loggerLink] : []), errorLink, link])
 }
 
-const defaultConfigResolver: ApolloConfigResolver = async () => {
+const defaultConfigResolver: ApolloConfigResolver = () => {
   const {
     public: { speckleServerVersion = 'unknown' }
   } = useRuntimeConfig()
@@ -427,7 +427,7 @@ const defaultConfigResolver: ApolloConfigResolver = async () => {
 
   const authToken = useAuthCookie()
   const wsClient = process.client
-    ? await createWsClient({ wsEndpoint, authToken, reqId })
+    ? createWsClient({ wsEndpoint, authToken, reqId })
     : undefined
   const link = createLink({ httpEndpoint, wsClient, authToken, nuxtApp, reqId })
 

packages/frontend-2/lib/core/nuxt-modules/apollo/module.ts

@@ -2,7 +2,7 @@ import path from 'path'
 import type { ApolloClientOptions } from '@apollo/client/core'
 import { addPluginTemplate, defineNuxtModule } from '@nuxt/kit'
 import type { MaybeAsync } from '@speckle/shared'
-import type { NuxtApp } from 'nuxt/dist/app'
+import type { NuxtApp } from 'nuxt/dist/app/nuxt'
 
 /**
  * Config resolver default exported function expected type

packages/frontend-2/package.json

@@ -47,7 +47,7 @@
     "@tiptap/vue-3": "2.0.0-beta.220",
     "@vue/apollo-composable": "4.0.2",
     "@vue/apollo-ssr": "4.0.0",
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.9.0",
     "apollo-upload-client": "^18.0.1",
     "dayjs": "^1.11.7",
     "graphql": "^16.6.0",
@@ -102,7 +102,7 @@
     "eslint-plugin-vue": "^9.18.1",
     "eslint-plugin-vuejs-accessibility": "^1.2.0",
     "jest": "27",
-    "nuxt": "^3.8.2",
+    "nuxt": "^3.11.1",
     "pino-pretty": "^10.0.1",
     "postcss": "^8.4.31",
     "postcss-custom-properties": "^12.1.9",
@@ -119,7 +119,7 @@
     "tailwindcss": "^3.4.1",
     "type-fest": "^3.5.1",
     "typescript": "^4.8.3",
-    "vue-tsc": "1.8.27",
+    "vue-tsc": "2.0.6",
     "wait-on": "^6.0.1"
   },
   "engines": {

packages/ui-components/src/components/layout/Dialog.vue

@@ -33,7 +33,7 @@
                 widthClasses
               ]"
               :as="isForm ? 'form' : 'div'"
-              @submit.prevent="onSubmit"
+              @submit.prevent="onSubmit || noop"
             >
               <div :class="scrolledFromTop && 'relative z-20 shadow-lg'">
                 <div
@@ -95,7 +95,7 @@ import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessu
 import { FormButton } from '~~/src/lib'
 import { XMarkIcon } from '@heroicons/vue/24/outline'
 import { computed, ref, useSlots } from 'vue'
-import { throttle } from 'lodash'
+import { throttle, noop } from 'lodash'
 
 type MaxWidthValue = 'sm' | 'md' | 'lg' | 'xl'