diff --git a/packages/playground/vue/Main.vue b/packages/playground/vue/Main.vue
index 87319acdf6f736..c5f3d27402fda7 100644
--- a/packages/playground/vue/Main.vue
+++ b/packages/playground/vue/Main.vue
@@ -15,6 +15,7 @@
     <div class="slotted">this should be red</div>
   </Slotted>
   <ScanDep />
+  <TsImport />
   <Suspense>
     <AsyncComponent />
   </Suspense>
@@ -33,6 +34,7 @@ import CustomBlock from './CustomBlock.vue'
 import SrcImport from './src-import/SrcImport.vue'
 import Slotted from './Slotted.vue'
 import ScanDep from './ScanDep.vue'
+import TsImport from './TsImport.vue'
 import AsyncComponent from './AsyncComponent.vue'
 import ReactivityTransform from './ReactivityTransform.vue'
 import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'
diff --git a/packages/playground/vue/TsImport.vue b/packages/playground/vue/TsImport.vue
new file mode 100644
index 00000000000000..986c383b2b9f4b
--- /dev/null
+++ b/packages/playground/vue/TsImport.vue
@@ -0,0 +1,8 @@
+<template>
+  <h2>Ts Import</h2>
+  <p class="ts-import">{{ foo }}</p>
+</template>
+
+<script setup lang="ts">
+import { foo } from './TsImportFile.js'
+</script>
diff --git a/packages/playground/vue/TsImportFile.ts b/packages/playground/vue/TsImportFile.ts
new file mode 100644
index 00000000000000..62761d5733b432
--- /dev/null
+++ b/packages/playground/vue/TsImportFile.ts
@@ -0,0 +1 @@
+export const foo = 'success'
diff --git a/packages/playground/vue/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts
index 025c05f53e8688..0bce5d1e1a03f5 100644
--- a/packages/playground/vue/__tests__/vue.spec.ts
+++ b/packages/playground/vue/__tests__/vue.spec.ts
@@ -14,6 +14,10 @@ test('template/script latest syntax support', async () => {
   expect(await page.textContent('.syntax')).toBe('baz')
 })
 
+test('import ts with .js extension with lang="ts"', async () => {
+  expect(await page.textContent('.ts-import')).toBe('success')
+})
+
 test('should remove comments in prod', async () => {
   expect(await page.innerHTML('.comments')).toBe(isBuild ? `` : `<!--hello-->`)
 })