diff --git a/playground/vue-sourcemap/__tests__/__snapshots__/serve.spec.ts.snap b/playground/vue-sourcemap/__tests__/__snapshots__/serve.spec.ts.snap
index 7a262ecd9a6f82..aa973f3abaffa6 100644
--- a/playground/vue-sourcemap/__tests__/__snapshots__/serve.spec.ts.snap
+++ b/playground/vue-sourcemap/__tests__/__snapshots__/serve.spec.ts.snap
@@ -1,8 +1,102 @@
 // Vitest Snapshot v1
 
+exports[`serve:vue-sourcemap > css 1`] = `
+{
+  "mappings": ";AAQA;EACE,UAAU;AACZ",
+  "sources": [
+    "/root/Css.vue",
+  ],
+  "sourcesContent": [
+    "<template>
+  <p class=\\"css\\">&lt;css&gt;</p>
+  <p :class=\\"$style['css-module']\\">&lt;css&gt; module</p>
+  <p class=\\"css-scoped\\">&lt;css&gt; scoped</p>
+  <p class=\\"css-scoped-nested\\">&lt;css&gt; scoped with nested</p>
+</template>
+
+<style>
+.css {
+  color: red;
+}
+</style>
+
+<style module>
+.css-module {
+  color: red;
+}
+</style>
+
+<style scoped>
+.css-scoped {
+  color: red;
+}
+</style>
+
+<style scoped>
+.css-scoped-nested {
+  color: red;
+  .dummy {
+    color: green;
+  }
+  font-weight: bold;
+}
+</style>
+",
+  ],
+  "version": 3,
+}
+`;
+
+exports[`serve:vue-sourcemap > css scoped 1`] = `
+{
+  "mappings": ";AAoBA;EACE,UAAU;AACZ",
+  "sources": [
+    "/root/Css.vue",
+  ],
+  "sourcesContent": [
+    "<template>
+  <p class=\\"css\\">&lt;css&gt;</p>
+  <p :class=\\"$style['css-module']\\">&lt;css&gt; module</p>
+  <p class=\\"css-scoped\\">&lt;css&gt; scoped</p>
+  <p class=\\"css-scoped-nested\\">&lt;css&gt; scoped with nested</p>
+</template>
+
+<style>
+.css {
+  color: red;
+}
+</style>
+
+<style module>
+.css-module {
+  color: red;
+}
+</style>
+
+<style scoped>
+.css-scoped {
+  color: red;
+}
+</style>
+
+<style scoped>
+.css-scoped-nested {
+  color: red;
+  .dummy {
+    color: green;
+  }
+  font-weight: bold;
+}
+</style>
+",
+  ],
+  "version": 3,
+}
+`;
+
 exports[`serve:vue-sourcemap > js 1`] = `
 {
-  "mappings": "mIAKA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;AAGP;AACd,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;wBARlB,oBAAiB,WAAd,MAAU",
+  "mappings": "AAKA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;AAGP;AACd,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;wBARlB,oBAAiB,WAAd,MAAU",
   "sources": [
     "/root/Js.vue",
   ],
@@ -23,3 +117,172 @@ console.log('setup')
   "version": 3,
 }
 `;
+
+exports[`serve:vue-sourcemap > less with additionalData 1`] = `
+{
+  "mappings": "AAKA;EACE",
+  "sources": [
+    "/root/Less.vue",
+  ],
+  "sourcesContent": [
+    "<template>
+  <p class=\\"less\\">&lt;less&gt; with additionalData</p>
+</template>
+
+<style lang=\\"less\\">
+.less {
+  color: @color;
+}
+</style>
+",
+  ],
+  "version": 3,
+}
+`;
+
+exports[`serve:vue-sourcemap > no script 1`] = `
+{
+  "mappings": ";;;wBACE,oBAAwB,WAArB,aAAiB",
+  "sourceRoot": "",
+  "sources": [
+    "/root/NoScript.vue",
+  ],
+  "sourcesContent": [
+    "<template>
+  <p>&lt;no-script&gt;</p>
+</template>
+",
+  ],
+  "version": 3,
+}
+`;
+
+exports[`serve:vue-sourcemap > no template 1`] = `
+{
+  "mappings": "AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;AAGP;AACd,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;",
+  "sources": [
+    "/root/NoTemplate.vue",
+  ],
+  "sourcesContent": [
+    "<script>
+console.log('script')
+</script>
+
+<script setup>
+console.log('setup')
+</script>
+",
+  ],
+  "version": 3,
+}
+`;
+
+exports[`serve:vue-sourcemap > sass 1`] = `
+{
+  "mappings": "AAKA;EACE",
+  "sources": [
+    "/root/Sass.vue",
+  ],
+  "sourcesContent": [
+    "<template>
+  <p class=\\"sass\\">&lt;sass&gt;</p>
+</template>
+
+<style lang=\\"sass\\">
+.sass
+  color: red
+</style>
+",
+  ],
+  "version": 3,
+}
+`;
+
+exports[`serve:vue-sourcemap > sass with import 1`] = `
+{
+  "mappings": "AAAA;EACE;;ACOF;EACE",
+  "sources": [
+    "/root/sassWithImportImported.sass",
+    "/root/SassWithImport.vue",
+  ],
+  "sourcesContent": [
+    ".sass-with-import-imported
+  color: red
+",
+    "<template>
+  <p class=\\"sass-with-import\\">&lt;sass&gt; with import</p>
+  <p class=\\"sass-with-import-imported\\">&lt;sass&gt; with import (imported)</p>
+</template>
+
+<style lang=\\"sass\\">
+@import './sassWithImportImported'
+
+.sass-with-import
+  color: red
+</style>
+",
+  ],
+  "version": 3,
+}
+`;
+
+exports[`serve:vue-sourcemap > src imported 1`] = `
+{
+  "mappings": "AAAA;EACE,UAAU;AACZ",
+  "sources": [
+    "/root/src-import/src-import.css",
+  ],
+  "sourcesContent": [
+    ".src-import {
+  color: red;
+}
+",
+  ],
+  "version": 3,
+}
+`;
+
+exports[`serve:vue-sourcemap > src imported sass 1`] = `
+{
+  "mappings": "AAAA;EACE;;ACCF;EACE",
+  "sources": [
+    "/root/src-import/src-import-imported.sass",
+    "/root/src-import/src-import.sass",
+  ],
+  "sourcesContent": [
+    ".src-import-sass-imported
+  color: red
+",
+    "@import './src-import-imported'
+
+.src-import-sass
+  color: red
+",
+  ],
+  "version": 3,
+}
+`;
+
+exports[`serve:vue-sourcemap > ts 1`] = `
+{
+  "mappings": ";AAKA,QAAQ,IAAI,WAAW;;;;;AAIvB,YAAQ,IAAI,UAAU;;;;;;;;uBARpB,oBAAiB,WAAd,MAAU",
+  "sources": [
+    "/root/Ts.vue",
+  ],
+  "sourcesContent": [
+    "<template>
+  <p>&lt;ts&gt;</p>
+</template>
+
+<script lang=\\"ts\\">
+console.log('ts script')
+</script>
+
+<script lang=\\"ts\\" setup>
+console.log('ts setup')
+</script>
+",
+  ],
+  "version": 3,
+}
+`;
diff --git a/playground/vue-sourcemap/__tests__/serve.spec.ts b/playground/vue-sourcemap/__tests__/serve.spec.ts
index e42a12e87be6a2..61f1f9f394380b 100644
--- a/playground/vue-sourcemap/__tests__/serve.spec.ts
+++ b/playground/vue-sourcemap/__tests__/serve.spec.ts
@@ -29,310 +29,49 @@ describe.runIf(isServe)('serve:vue-sourcemap', () => {
     const res = await page.request.get(new URL('./Ts.vue', page.url()).href)
     const js = await res.text()
     const map = extractSourcemap(js)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": ";AAKA,QAAQ,IAAI,WAAW;;;;;AAIvB,YAAQ,IAAI,UAAU;;;;;;;;uBARpB,oBAAiB,WAAd,MAAU",
-        "sources": [
-          "/root/Ts.vue",
-        ],
-        "sourcesContent": [
-          "<template>
-        <p>&lt;ts&gt;</p>
-      </template>
-
-      <script lang=\\"ts\\">
-      console.log('ts script')
-      </script>
-
-      <script lang=\\"ts\\" setup>
-      console.log('ts setup')
-      </script>
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
   })
 
   test('css', async () => {
     const css = await getStyleTagContentIncluding('.css ')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": ";AAQA;EACE,UAAU;AACZ",
-        "sources": [
-          "/root/Css.vue",
-        ],
-        "sourcesContent": [
-          "<template>
-        <p class=\\"css\\">&lt;css&gt;</p>
-        <p :class=\\"\$style['css-module']\\">&lt;css&gt; module</p>
-        <p class=\\"css-scoped\\">&lt;css&gt; scoped</p>
-        <p class=\\"css-scoped-nested\\">&lt;css&gt; scoped with nested</p>
-      </template>
-
-      <style>
-      .css {
-        color: red;
-      }
-      </style>
-
-      <style module>
-      .css-module {
-        color: red;
-      }
-      </style>
-
-      <style scoped>
-      .css-scoped {
-        color: red;
-      }
-      </style>
-
-      <style scoped>
-      .css-scoped-nested {
-        color: red;
-        .dummy {
-          color: green;
-        }
-        font-weight: bold;
-      }
-      </style>
-      ",
-        ],
-        "version": 3,
-      }
-    `)
-  })
-
-  test('css module', async () => {
-    const css = await getStyleTagContentIncluding('._css-module_')
-    const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": ";AAcA;EACE,UAAU;AACZ",
-        "sources": [
-          "/root/Css.vue",
-        ],
-        "sourcesContent": [
-          "<template>
-        <p class=\\"css\\">&lt;css&gt;</p>
-        <p :class=\\"\$style['css-module']\\">&lt;css&gt; module</p>
-        <p class=\\"css-scoped\\">&lt;css&gt; scoped</p>
-        <p class=\\"css-scoped-nested\\">&lt;css&gt; scoped with nested</p>
-      </template>
-
-      <style>
-      .css {
-        color: red;
-      }
-      </style>
-
-      <style module>
-      .css-module {
-        color: red;
-      }
-      </style>
-
-      <style scoped>
-      .css-scoped {
-        color: red;
-      }
-      </style>
-
-      <style scoped>
-      .css-scoped-nested {
-        color: red;
-        .dummy {
-          color: green;
-        }
-        font-weight: bold;
-      }
-      </style>
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
   })
 
   test('css scoped', async () => {
     const css = await getStyleTagContentIncluding('.css-scoped[data-v-')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": ";AAoBA;EACE,UAAU;AACZ",
-        "sources": [
-          "/root/Css.vue",
-        ],
-        "sourcesContent": [
-          "<template>
-        <p class=\\"css\\">&lt;css&gt;</p>
-        <p :class=\\"\$style['css-module']\\">&lt;css&gt; module</p>
-        <p class=\\"css-scoped\\">&lt;css&gt; scoped</p>
-        <p class=\\"css-scoped-nested\\">&lt;css&gt; scoped with nested</p>
-      </template>
-
-      <style>
-      .css {
-        color: red;
-      }
-      </style>
-
-      <style module>
-      .css-module {
-        color: red;
-      }
-      </style>
-
-      <style scoped>
-      .css-scoped {
-        color: red;
-      }
-      </style>
-
-      <style scoped>
-      .css-scoped-nested {
-        color: red;
-        .dummy {
-          color: green;
-        }
-        font-weight: bold;
-      }
-      </style>
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
   })
 
   test('sass', async () => {
     const css = await getStyleTagContentIncluding('.sass ')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": "AAKA;EACE",
-        "sources": [
-          "/root/Sass.vue",
-        ],
-        "sourcesContent": [
-          "<template>
-        <p class=\\"sass\\">&lt;sass&gt;</p>
-      </template>
-
-      <style lang=\\"sass\\">
-      .sass
-        color: red
-      </style>
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
   })
 
   test('sass with import', async () => {
     const css = await getStyleTagContentIncluding('.sass-with-import ')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": "AAAA;EACE;;ACOF;EACE",
-        "sources": [
-          "/root/sassWithImportImported.sass",
-          "/root/SassWithImport.vue",
-        ],
-        "sourcesContent": [
-          ".sass-with-import-imported
-        color: red
-      ",
-          "<template>
-        <p class=\\"sass-with-import\\">&lt;sass&gt; with import</p>
-        <p class=\\"sass-with-import-imported\\">&lt;sass&gt; with import (imported)</p>
-      </template>
-
-      <style lang=\\"sass\\">
-      @import './sassWithImportImported'
-
-      .sass-with-import
-        color: red
-      </style>
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
   })
 
   test('less with additionalData', async () => {
     const css = await getStyleTagContentIncluding('.less ')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": "AAKA;EACE",
-        "sources": [
-          "/root/Less.vue",
-        ],
-        "sourcesContent": [
-          "<template>
-        <p class=\\"less\\">&lt;less&gt; with additionalData</p>
-      </template>
-
-      <style lang=\\"less\\">
-      .less {
-        color: @color;
-      }
-      </style>
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
   })
 
   test('src imported', async () => {
     const css = await getStyleTagContentIncluding('.src-import[data-v-')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": "AAAA;EACE,UAAU;AACZ",
-        "sources": [
-          "/root/src-import/src-import.css",
-        ],
-        "sourcesContent": [
-          ".src-import {
-        color: red;
-      }
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
   })
 
   test('src imported sass', async () => {
     const css = await getStyleTagContentIncluding('.src-import-sass[data-v-')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": "AAAA;EACE;;ACCF;EACE",
-        "sources": [
-          "/root/src-import/src-import-imported.sass",
-          "/root/src-import/src-import.sass",
-        ],
-        "sourcesContent": [
-          ".src-import-sass-imported
-        color: red
-      ",
-          "@import './src-import-imported'
-
-      .src-import-sass
-        color: red
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
   })
 
   test('no script', async () => {
@@ -341,21 +80,7 @@ describe.runIf(isServe)('serve:vue-sourcemap', () => {
     )
     const js = await res.text()
     const map = extractSourcemap(js)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": ";;;wBACE",
-        "sources": [
-          "/root/NoScript.vue",
-        ],
-        "sourcesContent": [
-          "<template>
-        <p>&lt;no-script&gt;</p>
-      </template>
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
   })
 
   test('no template', async () => {
@@ -364,24 +89,6 @@ describe.runIf(isServe)('serve:vue-sourcemap', () => {
     )
     const js = await res.text()
     const map = extractSourcemap(js)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": "2IACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;AAGP;AACd,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC",
-        "sources": [
-          "/root/NoTemplate.vue",
-        ],
-        "sourcesContent": [
-          "<script>
-      console.log('script')
-      </script>
-
-      <script setup>
-      console.log('setup')
-      </script>
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
   })
 })