diff --git a/app/vue3/src/server/framework-preset-vue3.ts b/app/vue3/src/server/framework-preset-vue3.ts
index fb4dc76a2886..549ac4c02acd 100644
--- a/app/vue3/src/server/framework-preset-vue3.ts
+++ b/app/vue3/src/server/framework-preset-vue3.ts
@@ -24,7 +24,7 @@ export function webpack(config: Configuration): Configuration {
           options: {},
         },
         {
-          test: /\.tsx?$/,
+          test: /\.ts$/,
           use: [
             {
               loader: require.resolve('ts-loader'),
@@ -35,6 +35,19 @@ export function webpack(config: Configuration): Configuration {
             },
           ],
         },
+        {
+          test: /\.tsx$/,
+          use: [
+            {
+              loader: require.resolve('ts-loader'),
+              options: {
+                transpileOnly: true,
+                // Note this is different from the `appendTsSuffixTo` above!
+                appendTsxSuffixTo: [/\.vue$/],
+              },
+            },
+          ],
+        },
       ],
     },
     resolve: {
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
index 64e4d88c7a94..ab76b4d0c1c7 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
@@ -208,7 +208,7 @@ Object {
         "test": "/\\\\.vue$/",
       },
       Object {
-        "test": "/\\\\.tsx?$/",
+        "test": "/\\\\.ts$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/ts-loader/index.js",
@@ -221,6 +221,20 @@ Object {
           },
         ],
       },
+      Object {
+        "test": "/\\\\.tsx$/",
+        "use": Array [
+          Object {
+            "loader": "NODE_MODULES/ts-loader/index.js",
+            "options": Object {
+              "appendTsxSuffixTo": Array [
+                "/\\\\.vue$/",
+              ],
+              "transpileOnly": true,
+            },
+          },
+        ],
+      },
       Object {
         "include": "NODE_MODULES\\\\/acorn-jsx/",
         "test": "/\\\\.js$/",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
index 9f1c9872be90..c769b18749c7 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
@@ -207,7 +207,7 @@ Object {
         "test": "/\\\\.vue$/",
       },
       Object {
-        "test": "/\\\\.tsx?$/",
+        "test": "/\\\\.ts$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/ts-loader/index.js",
@@ -220,6 +220,20 @@ Object {
           },
         ],
       },
+      Object {
+        "test": "/\\\\.tsx$/",
+        "use": Array [
+          Object {
+            "loader": "NODE_MODULES/ts-loader/index.js",
+            "options": Object {
+              "appendTsxSuffixTo": Array [
+                "/\\\\.vue$/",
+              ],
+              "transpileOnly": true,
+            },
+          },
+        ],
+      },
       Object {
         "include": "NODE_MODULES\\\\/acorn-jsx/",
         "test": "/\\\\.js$/",