nuxt-spec 0.4.0-alpha.1 → 0.4.0-alpha.3

package/LICENSE

@@ -1,21 +1,21 @@
-# MIT License
-
-Copyright (c) 2025-present Alois Sečkár
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+# MIT License
+
+Copyright (c) 2025-present Alois Sečkár
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,13 +1,13 @@
-# Nuxt Spec
-
-![Nuxt Spec](https://github.com/AloisSeckar/nuxt-spec/blob/main/public/nuxt-spec.png)
-
-A _"testing done right"_ Nuxt base layer.
-
-## How to use
-
-See [ONLINE DOCS](https://nuxt-spec.netlify.app) for all the necessary information.
-
-See [CHANGELOG](https://nuxt-spec.netlify.app/3-1-changelog.html) for the full list of changes.
-
-See [CONTRIBUTING](https://nuxt-spec.netlify.app/4-1-contributing.html) if you want to help.
+# Nuxt Spec
+
+![Nuxt Spec](https://github.com/AloisSeckar/nuxt-spec/blob/main/public/nuxt-spec.png)
+
+A _"testing done right"_ Nuxt base layer.
+
+## How to use
+
+See [ONLINE DOCS](https://nuxt-spec.netlify.app) for all the necessary information.
+
+See [CHANGELOG](https://nuxt-spec.netlify.app/3-1-changelog.html) for the full list of changes.
+
+See [CONTRIBUTING](https://nuxt-spec.netlify.app/4-1-contributing.html) if you want to help.

package/app/app.vue

@@ -1,10 +1,10 @@
-<template>
-  <div>
-    <NuxtWelcome />
-    <div>
-      Test-pack layer for <a href="https://nuxt.com/">Nuxt</a> applications
-    </div>
-    <NuxtSpecTestComponent id="test" text="Test Component" />
-    <NuxtSpecApiTestComponent />
-  </div>
-</template>
+<template>
+  <div>
+    <NuxtWelcome />
+    <div>
+      Test-pack layer for <a href="https://nuxt.com/">Nuxt</a> applications
+    </div>
+    <NuxtSpecTestComponent id="test" text="Test Component" />
+    <NuxtSpecApiTestComponent />
+  </div>
+</template>

package/app/components/NuxtSpecApiTestComponent.vue

@@ -1,24 +1,24 @@
-<template>
-  <div>
-    <h2>API Test</h2>
-    <button id="api-fetch" @click="fetchData">
-      Fetch Data
-    </button>
-    <div id="api-result">
-      {{ data }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const data = ref('')
-const fetchData = async () => {
-  try {
-    data.value = await $fetch('https://jsonplaceholder.typicode.com/posts/1')
-    console.debug('Fetched data:', data.value)
-  } catch (error) {
-    data.value = 'Error fetching data'
-    console.error('API fetch error:', error)
-  }
-}
-</script>
+<template>
+  <div>
+    <h2>API Test</h2>
+    <button id="api-fetch" @click="fetchData">
+      Fetch Data
+    </button>
+    <div id="api-result">
+      {{ data }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const data = ref('')
+const fetchData = async () => {
+  try {
+    data.value = await $fetch('https://jsonplaceholder.typicode.com/posts/1')
+    console.debug('Fetched data:', data.value)
+  } catch (error) {
+    data.value = 'Error fetching data'
+    console.error('API fetch error:', error)
+  }
+}
+</script>

package/app/components/NuxtSpecTestComponent.vue

@@ -1,9 +1,9 @@
-<template>
-  <div data-testid="test-component" style="margin: 1rem 0; padding: 0.5rem; border: 1px solid black;">
-    {{ text }}
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({ text: { type: String, default: 'nuxt-spec' } })
-</script>
+<template>
+  <div data-testid="test-component" style="margin: 1rem 0; padding: 0.5rem; border: 1px solid black;">
+    {{ text }}
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({ text: { type: String, default: 'nuxt-spec' } })
+</script>

package/app/components/index.d.ts

@@ -1,7 +1,7 @@
-// type hint for tsconfig.nuxt-spec.json
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-
-  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
-  export default component
-}
+// type hint for tsconfig.nuxt-spec.json
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}

package/app/components/index.ts

@@ -1,2 +1,2 @@
-export { default as NuxtSpecTestComponent } from './NuxtSpecTestComponent.vue'
-export { default as NuxtSpecApiTestComponent } from './NuxtSpecApiTestComponent.vue'
+export { default as NuxtSpecTestComponent } from './NuxtSpecTestComponent.vue'
+export { default as NuxtSpecApiTestComponent } from './NuxtSpecApiTestComponent.vue'

package/app/utils/vitest-utils.ts

@@ -1,5 +1,5 @@
-// Element.checkVisibility() is not available in Vitest
-global.Element.prototype.checkVisibility = function () {
-  // in tests we always just assume the element is visible
-  return true
-}
+// Element.checkVisibility() is not available in Vitest
+global.Element.prototype.checkVisibility = function () {
+  // in tests we always just assume the element is visible
+  return true
+}

package/config/index.d.ts

@@ -1,36 +1,36 @@
-import type { UserConfig } from 'vite'
-import type { TestUserConfig } from 'vitest/config'
-
-export type { HtmlReportOpenMode, NuxtSpecOptions } from './utils/options.mjs'
-
-/** Typed Vite configuration object for tests */
-type ExtendedUserConfig = UserConfig & {
-  test?: TestUserConfig
-}
-
-/**
- * Allows fine-grained control over default Vitest `projects`.
- *
- * By default, everything is included.
- * If set to `false`, `test.projects` key is not merged at all.
- * If set to object, specific projects can be omitted by setting respective key to `false`.
- */
-type ProjectsConfig = boolean | {
-  default?: boolean
-  unit?: boolean
-  nuxt?: boolean
-  e2e?: boolean
-  browser?: boolean
-}
-
-/**
- * Prepare Vitest configuration object - user config merged with nuxt-spec defaults
- * (defaults are adjusted by `spec` key from nuxt.config.ts and NUXT_SPEC_* env variables)
- * @param userVitestConfig - custom Vitest config passed from the user
- * @param projects - allows fine-grained control over default `test.projects` - see `ProjectsConfig` for details
- * @returns Promise resolving to defu-merged Vitest configuration
- */
-export declare function loadVitestConfig(
-  userVitestConfig: ExtendedUserConfig,
-  projects?: ProjectsConfig,
-): Promise<ExtendedUserConfig>
+import type { UserConfig } from 'vite'
+import type { TestUserConfig } from 'vitest/config'
+
+export type { HtmlReportOpenMode, NuxtSpecOptions } from './utils/options.mjs'
+
+/** Typed Vite configuration object for tests */
+type ExtendedUserConfig = UserConfig & {
+  test?: TestUserConfig
+}
+
+/**
+ * Allows fine-grained control over default Vitest `projects`.
+ *
+ * By default, everything is included.
+ * If set to `false`, `test.projects` key is not merged at all.
+ * If set to object, specific projects can be omitted by setting respective key to `false`.
+ */
+type ProjectsConfig = boolean | {
+  default?: boolean
+  unit?: boolean
+  nuxt?: boolean
+  e2e?: boolean
+  browser?: boolean
+}
+
+/**
+ * Prepare Vitest configuration object - user config merged with nuxt-spec defaults
+ * (defaults are adjusted by `spec` key from nuxt.config.ts and NUXT_SPEC_* env variables)
+ * @param userVitestConfig - custom Vitest config passed from the user
+ * @param projects - allows fine-grained control over default `test.projects` - see `ProjectsConfig` for details
+ * @returns Promise resolving to defu-merged Vitest configuration
+ */
+export declare function loadVitestConfig(
+  userVitestConfig: ExtendedUserConfig,
+  projects?: ProjectsConfig,
+): Promise<ExtendedUserConfig>

package/config/index.mjs

@@ -1,140 +1,147 @@
-// this is the default Vitest config object
-// based on https://nuxt.com/docs/4.x/getting-started/testing#setup
-// `projects=false` can be used to suspend the default usage of "projects" in Vitest config
-
-import { availableParallelism } from 'node:os'
-import { fileURLToPath } from 'node:url'
-import { addMessageFilters, onConsoleLog } from './utils/warnings.mjs' // filter out unnecessary logs
-import { mergeConfig } from './utils/merge.mjs' // defu-based merge function
-import { loadSpecOptions } from './utils/options.mjs' // `spec` key from nuxt.config.ts + NUXT_SPEC_* env variables
-import { nuxtSpecReportPlugin } from './utils/reporter.mjs' // HTML test report
-import { defineConfig } from 'vitest/config'
-import { defineVitestProject } from '@nuxt/test-utils/config'
-import { playwright } from '@vitest/browser-playwright'
-import vue from '@vitejs/plugin-vue'
-
-// absolute paths so it works from within the nuxt-ignis package
-const externalPlaywrightSetup = fileURLToPath(new URL('../utils/playwright.ts', import.meta.url))
-
-export async function loadVitestConfig(userVitestConfig, projects = true) {
-  const { externalPlaywright, htmlReport, messageFilters } = await loadSpecOptions()
-
-  // extend array of messages that will be filtered out from the output
-  // with values passed by the user (if any)
-  addMessageFilters(messageFilters)
-
-  const baseConfig = {
-    test: {
-      // filter-out unnecessary console logs coming from Vitest
-      // when the import is resolved, unnecessary stderr logs are also filtered-out
-      // as a side-effect
-      onConsoleLog,
-      // Vitest defaults to 5 which might be unnecessarily restrictive
-      // if the host machine can support more
-      maxConcurrency: availableParallelism() / 2,
-    },
-  }
-
-  // HTML test report for all projects
-  // report is generated unless explicitly disabled
-  if (htmlReport.enabled) {
-    baseConfig.plugins = [nuxtSpecReportPlugin({ open: htmlReport.open })]
-  }
-
-  // add proposed projects settings
-  // user can control the inclusion via `projects: ProjectsConfig` config object
-  // projects are included by default unless explicitly disabled
-  if (projects !== false) {
-    baseConfig.test.projects = []
-
-    // default fallback to catch tests directly in /test folder
-    if (projects.default !== false) {
-      baseConfig.test.projects.push({
-        extends: true,
-        test: {
-          name: 'default',
-          include: ['{test,tests}/**/*.{test,spec}.ts', '!test/{browser,e2e,nuxt,unit}/**'],
-          environment: 'node',
-        },
-      })
-    }
-
-    // proposed setup for Unit tests
-    if (projects.unit !== false) {
-      baseConfig.test.projects.push({
-        extends: true,
-        test: {
-          name: 'unit',
-          include: ['test/unit/**/*.{test,spec}.ts'],
-          environment: 'node',
-        },
-      })
-    }
-
-    // proposed setup for Nuxt component tests
-    if (projects.nuxt !== false) {
-      baseConfig.test.projects.push(
-        await defineVitestProject({
-          extends: true,
-          test: {
-            name: 'nuxt',
-            include: ['test/nuxt/**/*.{test,spec}.ts'],
-            environment: 'nuxt',
-          },
-        }),
-      )
-    }
-
-    // proposed setup for classic E2E tests (node-based, using @nuxt/test-utils)
-    if (projects.e2e !== false) {
-      baseConfig.test.projects.push({
-        extends: true,
-        test: {
-          name: 'e2e',
-          include: ['test/e2e/**/*.{test,spec}.ts'],
-          environment: 'node',
-          // allows connecting to an external Playwright instance (if configured)
-          setupFiles: externalPlaywright ? [externalPlaywrightSetup] : [],
-          // setup file will just read the value via `inject()`
-          provide: externalPlaywright ? { nuxtSpecExternalPlaywright: externalPlaywright } : {},
-        },
-      })
-    }
-
-    // proposed setup for browser component tests (with Playwright runner)
-    if (projects.browser !== false) {
-      // allows connecting to an external Playwright instance (if configured)
-      const playwrightConfig = {}
-      if (externalPlaywright) {
-        console.log(`[Nuxt Spec] Using external Playwright instance for browser tests at: ${externalPlaywright}`)
-        playwrightConfig.connectOptions = {
-          wsEndpoint: externalPlaywright,
-          // this allows reaching caller's localhost from within the external Playwright
-          exposeNetwork: '<loopback>',
-        }
-      }
-      baseConfig.test.projects.push({
-        extends: true,
-        // vue plugin is required for proper imports resolution
-        plugins: [vue()],
-        test: {
-          name: 'browser',
-          include: ['test/browser/**/*.{test,spec}.ts'],
-          environment: 'node',
-          // only chromium browser by default - add others manually if needed
-          browser: {
-            provider: playwright(playwrightConfig),
-            enabled: true,
-            headless: true,
-            instances: [{
-              browser: 'chromium',
-              viewport: { width: 1280, height: 720 },
-            }],
-          },
-        },
-      })
-    }
-  }
-
-  return mergeConfig(userVitestConfig, defineConfig(baseConfig))
-}
+// this is the default Vitest config object
+// based on https://nuxt.com/docs/4.x/getting-started/testing#setup
+// `projects=false` can be used to suspend the default usage of "projects" in Vitest config
+
+import { availableParallelism } from 'node:os'
+import { fileURLToPath } from 'node:url'
+import { addMessageFilters, onConsoleLog } from './utils/warnings.mjs' // filter out unnecessary logs
+import { mergeConfig } from './utils/merge.mjs' // defu-based merge function
+import { loadSpecOptions } from './utils/options.mjs' // `spec` key from nuxt.config.ts + NUXT_SPEC_* env variables
+import { nuxtSpecReportPlugin } from './utils/reporter.mjs' // HTML test report
+import { defineConfig } from 'vitest/config'
+import { defineVitestProject } from '@nuxt/test-utils/config'
+import { playwright } from '@vitest/browser-playwright'
+import vue from '@vitejs/plugin-vue'
+
+// absolute paths so it works from within the nuxt-ignis package
+const externalPlaywrightSetup = fileURLToPath(new URL('../utils/playwright.ts', import.meta.url))
+
+export async function loadVitestConfig(userVitestConfig, projects = true) {
+  const { externalPlaywright, htmlReport, messageFilters } = await loadSpecOptions()
+
+  // extend array of messages that will be filtered out from the output
+  // with values passed by the user (if any)
+  addMessageFilters(messageFilters)
+
+  const baseConfig = {
+    test: {
+      // filter-out unnecessary console logs coming from Vitest
+      // when the import is resolved, unnecessary stderr logs are also filtered-out
+      // as a side-effect
+      onConsoleLog,
+      // Vitest defaults to 5 which might be unnecessarily restrictive
+      // if the host machine can support more
+      maxConcurrency: availableParallelism() / 2,
+      // coverage is NOT enabled by default
+      // (use `test-c` command or `--coverage` flag)
+      // Bun runtime lacks support for the V8 provider
+      // (`bun run` without `--bun` still runs Vitest in Node, where V8 works)
+      coverage: {
+        provider: process.versions.bun ? 'istanbul' : 'v8',
+      },
+    },
+  }
+
+  // HTML test report for all projects
+  // report is generated unless explicitly disabled
+  if (htmlReport.enabled) {
+    baseConfig.plugins = [nuxtSpecReportPlugin({ open: htmlReport.open })]
+  }
+
+  // add proposed projects settings
+  // user can control the inclusion via `projects: ProjectsConfig` config object
+  // projects are included by default unless explicitly disabled
+  if (projects !== false) {
+    baseConfig.test.projects = []
+
+    // default fallback to catch tests directly in /test folder
+    if (projects.default !== false) {
+      baseConfig.test.projects.push({
+        extends: true,
+        test: {
+          name: 'default',
+          include: ['{test,tests}/**/*.{test,spec}.ts', '!test/{browser,e2e,nuxt,unit}/**'],
+          environment: 'node',
+        },
+      })
+    }
+
+    // proposed setup for Unit tests
+    if (projects.unit !== false) {
+      baseConfig.test.projects.push({
+        extends: true,
+        test: {
+          name: 'unit',
+          include: ['test/unit/**/*.{test,spec}.ts'],
+          environment: 'node',
+        },
+      })
+    }
+
+    // proposed setup for Nuxt component tests
+    if (projects.nuxt !== false) {
+      baseConfig.test.projects.push(
+        await defineVitestProject({
+          extends: true,
+          test: {
+            name: 'nuxt',
+            include: ['test/nuxt/**/*.{test,spec}.ts'],
+            environment: 'nuxt',
+          },
+        }),
+      )
+    }
+
+    // proposed setup for classic E2E tests (node-based, using @nuxt/test-utils)
+    if (projects.e2e !== false) {
+      baseConfig.test.projects.push({
+        extends: true,
+        test: {
+          name: 'e2e',
+          include: ['test/e2e/**/*.{test,spec}.ts'],
+          environment: 'node',
+          // allows connecting to an external Playwright instance (if configured)
+          setupFiles: externalPlaywright ? [externalPlaywrightSetup] : [],
+          // setup file will just read the value via `inject()`
+          provide: externalPlaywright ? { nuxtSpecExternalPlaywright: externalPlaywright } : {},
+        },
+      })
+    }
+
+    // proposed setup for browser component tests (with Playwright runner)
+    if (projects.browser !== false) {
+      // allows connecting to an external Playwright instance (if configured)
+      const playwrightConfig = {}
+      if (externalPlaywright) {
+        console.log(`[Nuxt Spec] Using external Playwright instance for browser tests at: ${externalPlaywright}`)
+        playwrightConfig.connectOptions = {
+          wsEndpoint: externalPlaywright,
+          // this allows reaching caller's localhost from within the external Playwright
+          exposeNetwork: '<loopback>',
+        }
+      }
+      baseConfig.test.projects.push({
+        extends: true,
+        // vue plugin is required for proper imports resolution
+        plugins: [vue()],
+        test: {
+          name: 'browser',
+          include: ['test/browser/**/*.{test,spec}.ts'],
+          environment: 'node',
+          // only chromium browser by default - add others manually if needed
+          browser: {
+            provider: playwright(playwrightConfig),
+            enabled: true,
+            headless: true,
+            instances: [{
+              browser: 'chromium',
+              viewport: { width: 1280, height: 720 },
+            }],
+          },
+        },
+      })
+    }
+  }
+
+  return mergeConfig(userVitestConfig, defineConfig(baseConfig))
+}

package/config/report/report-entry.html

@@ -1,6 +1,6 @@
-<div class="failure">
-  <h2>{{TITLE}}</h2>
-  <p class="location">{{LOCATION}}</p>
-  {{ERRORS}}
-  {{SCREENSHOTS}}
-</div>
+<div class="failure">
+  <h2>{{TITLE}}</h2>
+  <p class="location">{{LOCATION}}</p>
+  {{ERRORS}}
+  {{SCREENSHOTS}}
+</div>

package/config/report/report-head.html

@@ -1,34 +1,34 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<title>Nuxt Spec Test Report - {{TIMESTAMP}}</title>
-<style>
-  body { font-family: system-ui, sans-serif; margin: 2rem; background: #f5f5f5; color: #222; }
-  h1 { font-size: 1.4rem; }
-  .summary { font-weight: 700; font-size: 18px; }
-  .summary.passed { color: #0b0; }
-  .summary.failed { color: #b00; }
-  .failure { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin: 1rem 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
-  .failure h2 { font-size: 1rem; margin: 0 0 .25rem; }
-  .failure .location { color: #666; font-size: .8rem; margin: 0 0 .75rem; }
-  .failure pre { white-space: pre-wrap; word-break: break-word; font-size: .8rem; margin: 0 0 .75rem; padding: .5rem; background: #fafafa; border: 1px solid #eee; border-radius: 4px; }
-  .failure pre.message { color: #b00; }
-  .failure details summary { cursor: pointer; font-size: .8rem; margin-bottom: .25rem; }
-  .screenshot { margin-top: .75rem; }
-  .screenshot h3 { font-size: .9rem; margin: 0 0 .25rem; }
-  .screenshot .message { color: #b00; font-size: .85rem; margin: 0 0 .75rem; }
-  .pair { display: flex; gap: 1rem; flex-wrap: wrap; }
-  .pair figure { margin: 0; flex: 1 1 0; min-width: 240px; }
-  .pair figcaption { font-size: .8rem; margin-bottom: .25rem; font-weight: bold; }
-  .pair figure:first-child figcaption { color: #0b0; }
-  .pair figure:last-child figcaption { color: #b00; }
-  .pair img { max-width: 100%; background: #fff; }
-  .pair figure:first-child img { border: 2px solid #0b0; }
-  .pair figure:last-child img { border: 2px solid #b00; }
-</style>
-</head>
-<body>
-<h1>Nuxt Spec Test Report - {{TIMESTAMP}}</h1>
-<p class="summary {{STATUS}}">{{SUMMARY}}</p>
-<!-- BEGIN failure entries -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Nuxt Spec Test Report - {{TIMESTAMP}}</title>
+<style>
+  body { font-family: system-ui, sans-serif; margin: 2rem; background: #f5f5f5; color: #222; }
+  h1 { font-size: 1.4rem; }
+  .summary { font-weight: 700; font-size: 18px; }
+  .summary.passed { color: #0b0; }
+  .summary.failed { color: #b00; }
+  .failure { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin: 1rem 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
+  .failure h2 { font-size: 1rem; margin: 0 0 .25rem; }
+  .failure .location { color: #666; font-size: .8rem; margin: 0 0 .75rem; }
+  .failure pre { white-space: pre-wrap; word-break: break-word; font-size: .8rem; margin: 0 0 .75rem; padding: .5rem; background: #fafafa; border: 1px solid #eee; border-radius: 4px; }
+  .failure pre.message { color: #b00; }
+  .failure details summary { cursor: pointer; font-size: .8rem; margin-bottom: .25rem; }
+  .screenshot { margin-top: .75rem; }
+  .screenshot h3 { font-size: .9rem; margin: 0 0 .25rem; }
+  .screenshot .message { color: #b00; font-size: .85rem; margin: 0 0 .75rem; }
+  .pair { display: flex; gap: 1rem; flex-wrap: wrap; }
+  .pair figure { margin: 0; flex: 1 1 0; min-width: 240px; }
+  .pair figcaption { font-size: .8rem; margin-bottom: .25rem; font-weight: bold; }
+  .pair figure:first-child figcaption { color: #0b0; }
+  .pair figure:last-child figcaption { color: #b00; }
+  .pair img { max-width: 100%; background: #fff; }
+  .pair figure:first-child img { border: 2px solid #0b0; }
+  .pair figure:last-child img { border: 2px solid #b00; }
+</style>
+</head>
+<body>
+<h1>Nuxt Spec Test Report - {{TIMESTAMP}}</h1>
+<p class="summary {{STATUS}}">{{SUMMARY}}</p>
+<!-- BEGIN failure entries -->