Re-add compatibility mode for Vue 3, for safety

client/src/shims-vue.d.ts

@@ -4,13 +4,23 @@
 //   export default Vue;
 // }
 
-// for Vue 3
+// for Vue 3 compat
-declare module '*.vue' {
+declare module 'vue' {
-  import type { DefineComponent } from 'vue';
+  import { CompatVue } from '@vue/runtime-dom';
-  const component: DefineComponent<{}, {}, any>;
+  const Vue: CompatVue;
-  export default component;
+  export default Vue;
+  export * from '@vue/runtime-dom';
+  const { configureCompat } = Vue;
+  export { configureCompat };
 }
 
+// for Vue 3
+// declare module '*.vue' {
+//   import type { DefineComponent } from 'vue';
+//   const component: DefineComponent<{}, {}, any>;
+//   export default component;
+// }
+
 // ugly hack to make types for those two packages
 declare module 'vue-vimeo-player' {
   const plugin: any;

client/vite.config.ts

@@ -67,6 +67,7 @@ export default defineConfig({
       '@': resolve('./src'),
       styles: resolve('./src/styles'),
       gql: resolve('./src/graphql/gql'),
+      vue: '@vue/compat'
     },
   },
   server: {
@@ -75,6 +76,14 @@ export default defineConfig({
       clientPort: 8080,
     },
   },
-  plugins: [gql(), vue(), htmlPlugin()],
+  plugins: [gql(), vue({
+    template: {
+      compilerOptions: {
+        compatConfig: {
+          MODE: 2
+        }
+      }
+    }
+  }), htmlPlugin()],
   define,
 });