Install vue 3 related dependencies

PrestaShopCorp · Jan 3, 2024 · e358c91 · e358c91
1 parent 68d53f6
commit e358c91
Show file tree

Hide file tree

Showing 4 changed files with 447 additions and 1,282 deletions.
diff --git a/_dev/apps/ui/package.json b/_dev/apps/ui/package.json
@@ -27,6 +27,7 @@
     "@segment/analytics-next": "^1.56.0",
     "@sentry/tracing": "^7.39.0",
     "@sentry/vue": "^7.39.0",
+    "@vue/compat": "^3.4.4",
     "bootstrap": "^4.6.2",
     "bootstrap-vue": "^2.22.0",
     "chart.js": "^4.3.3",
@@ -42,7 +43,7 @@
     "semver": "^7.5.3",
     "showdown": "^1.9.1",
     "ts-loader": "^8.4.0",
-    "vue": "^2.7.14",
+    "vue": "^3.3.9",
     "vue-i18n": "^8.27.2",
     "vue-router": "^3.6.5",
     "vue-select": "^3.20.0",
@@ -65,7 +66,8 @@
     "@types/showdown": "^1.9.4",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-vue2": "^2.3.1",
+    "@vitejs/plugin-vue": "^5.0.2",
+    "@vue/compiler-sfc": "^3.4.4",
     "@vue/eslint-config-airbnb": "^5.3.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^1.2.2",
@@ -90,11 +92,9 @@
     "vite": "^4.3.9",
     "vite-plugin-css-injected-by-js": "^3.1.2",
     "vite-plugin-react-remove-attributes": "^1.0.3",
-    "vite-plugin-vue2": "^2.0.3",
     "vitest": "^0.32.3",
     "vitest-fetch-mock": "^0.2.2",
-    "vue-loader": "^15.10",
-    "vue-template-compiler": "^2.7.14"
+    "vue-loader": "^15.10"
   },
   "msw": {
     "workerDirectory": "storybook-static"

diff --git a/_dev/apps/ui/src/shims-vue.d.ts b/_dev/apps/ui/src/shims-vue.d.ts
@@ -1,9 +1,12 @@
 import {AnalyticsBrowser} from '@segment/analytics-next';
 
-declare module '*.vue' {
-  import Vue from 'vue';
-
-  export default Vue;
+declare module 'vue' {
+  import { CompatVue } from '@vue/runtime-dom'
+  const Vue: CompatVue
+  export default Vue
+  export * from '@vue/runtime-dom'
+  const { configureCompat } = Vue
+  export { configureCompat }
 }
 
 declare module 'vue/types/vue' {

diff --git a/_dev/apps/ui/vite.config.ts b/_dev/apps/ui/vite.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite';
-import { createVuePlugin as vue } from "vite-plugin-vue2";
+import vue from "@vitejs/plugin-vue";
 import path from 'path';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 import VitePluginReactRemoveAttributes from 'vite-plugin-react-remove-attributes';
@@ -8,7 +8,15 @@ import VitePluginReactRemoveAttributes from 'vite-plugin-react-remove-attributes
 export default defineConfig(({ mode }) => ({
   base: './',
   plugins: [
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          compatConfig: {
+            MODE: 2
+          }
+        }
+      }
+    }),
     cssInjectedByJsPlugin(),
     VitePluginReactRemoveAttributes({
       attributes: ['data-test-id'],
@@ -27,6 +35,10 @@ export default defineConfig(({ mode }) => ({
   ],
   resolve: {
     alias: [
+      {
+        find: 'vue',
+        replacement: '@vue/compat',
+      },
       {
         find: "@",
         replacement: path.resolve(__dirname, "./src"),