diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index c43886fc..be5b5610 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/packages/plugin-vue/src/main.ts
@@ -264,7 +264,7 @@ async function genTemplateCode(
   // If the template is not using pre-processor AND is not using external src,
   // compile and inline it directly in the main module. When served in vite this
   // saves an extra request per SFC which can improve load performance.
-  if (!template.lang && !template.src) {
+  if ((!template.lang || template.lang === 'html') && !template.src) {
     return transformTemplateInMain(
       template.content,
       descriptor,
diff --git a/packages/plugin-vue/src/script.ts b/packages/plugin-vue/src/script.ts
index f62a31e1..f9627faf 100644
--- a/packages/plugin-vue/src/script.ts
+++ b/packages/plugin-vue/src/script.ts
@@ -105,7 +105,7 @@ export function canInlineMain(
     return false
   }
   const lang = descriptor.script?.lang || descriptor.scriptSetup?.lang
-  if (!lang) {
+  if (!lang || lang === 'js') {
     return true
   }
   if (lang === 'ts' && options.devServer) {
diff --git a/packages/plugin-vue/src/template.ts b/packages/plugin-vue/src/template.ts
index 0f9b7fb8..d3a6350d 100644
--- a/packages/plugin-vue/src/template.ts
+++ b/packages/plugin-vue/src/template.ts
@@ -176,7 +176,7 @@ export function resolveTemplateCompilerOptions(
     ssr,
     ssrCssVars: cssVars,
     transformAssetUrls,
-    preprocessLang: block.lang,
+    preprocessLang: block.lang === 'html' ? undefined : block.lang,
     preprocessOptions,
     compilerOptions: {
       ...options.template?.compilerOptions,
diff --git a/playground/vue/DefaultLangs.vue b/playground/vue/DefaultLangs.vue
new file mode 100644
index 00000000..43f022f8
--- /dev/null
+++ b/playground/vue/DefaultLangs.vue
@@ -0,0 +1,16 @@
+<template lang="html">
+  <h2>default langs</h2>
+  <div>
+    default lang: <span class="default-langs">{{ foo }}</span>
+  </div>
+</template>
+
+<script setup lang="js">
+const foo = 'foo'
+</script>
+
+<style scoped lang="css">
+.default-langs {
+  color: blue;
+}
+</style>
diff --git a/playground/vue/Main.vue b/playground/vue/Main.vue
index b587c916..9ab11aac 100644
--- a/playground/vue/Main.vue
+++ b/playground/vue/Main.vue
@@ -29,6 +29,7 @@
   <WorkerTest />
   <Url />
   <TsGeneric msg="hello" />
+  <DefaultLangs />
 </template>
 
 <script setup lang="ts">
@@ -52,6 +53,7 @@ import WorkerTest from './worker.vue'
 import { ref } from 'vue'
 import Url from './Url.vue'
 import TypeProps from './TypeProps.vue'
+import DefaultLangs from './DefaultLangs.vue'
 
 const TsGeneric = defineAsyncComponent(() => import('./TsGeneric.vue'))
 
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index 310f4b05..850e7cfe 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -337,3 +337,10 @@ describe('macro imported types', () => {
 test('TS with generics', async () => {
   expect(await page.textContent('.generic')).toMatch('hello')
 })
+
+describe('default langs', () => {
+  test('should work', async () => {
+    expect(await page.textContent('.default-langs')).toBe('foo')
+    expect(await getColor('.default-langs')).toBe('blue')
+  })
+})
diff --git a/playground/vue/tsconfig.json b/playground/vue/tsconfig.json
index 340de3c5..ea7fde7d 100644
--- a/playground/vue/tsconfig.json
+++ b/playground/vue/tsconfig.json
@@ -3,6 +3,7 @@
     // esbuild transpile should ignore this
     "target": "ES5",
     "jsx": "preserve",
+    "allowJs": true,
     "paths": {
       "~utils": ["../test-utils.ts"],
       "~types": ["./types-aliased.d.ts"]