nuxt · JessicaSachs · Jun 17, 2025 · Jun 17, 2025
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <div class="bg-red-500">
+      My Tailwind Div
+    </div>
+    <MyComponent title="My title" />
+  </div>
+</template>
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { MyComponentProps } from '~/types/component-props'
+
+defineProps<MyComponentProps>()
+</script>
+
+<template>
+  <div>
+    {{ title }}
+  </div>
+</template>
@@ -0,0 +1,3 @@
+export default defineNuxtConfig({
+  extends: ['my-nuxt-layer'],
+})
@@ -0,0 +1,26 @@
+{
+  "name": "example-app-vitest-layers",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "nuxt": "catalog:"
+  },
+  "devDependencies": {
+    "my-nuxt-layer": "workspace:*",
+    "@nuxt/test-utils": "latest",
+    "happy-dom": "18.0.1",
+    "playwright-core": "1.52.0",
+    "tinyglobby": "0.2.14",
+    "typescript": "5.8.3",
+    "vitest": "3.2.3"
+  }
+}
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+
+describe('my test', () => {
+  // ... test with Nuxt environment!
+  it('works', () => {
+    expect(Object.keys(useAppConfig())).toMatchInlineSnapshot(`
+      [
+        "nuxt",
+      ]
+    `)
+  })
+})
@@ -0,0 +1,19 @@
+import { resolve } from 'node:path'
+import { createPage, setup } from '@nuxt/test-utils/e2e'
+import { describe, expect, it } from 'vitest'
+import { isWindows } from 'std-env'
+
+await setup({
+  rootDir: resolve('../', import.meta.dirname),
+  browser: true,
+  setupTimeout: isWindows ? 240000 : 120000,
+})
+
+describe('browser', () => {
+  it('runs a test', { timeout: 20000 }, async () => {
+    const page = await createPage('/')
+    const text = await page.getByRole('heading', { name: 'Welcome to Nuxt!' }).textContent()
+    expect(text).toContain('Welcome to Nuxt!')
+    await page.close()
+  })
+})
@@ -0,0 +1,42 @@
+import { resolve } from 'node:path'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
+import { describe, expect, it } from 'vitest'
+import { loadNuxt, buildNuxt } from '@nuxt/kit'
+
+const rootDir = resolve('../', import.meta.dirname)
+const randomId = Math.random().toString(36).slice(2, 8)
+const buildDir = resolve(rootDir, '.nuxt', 'test', randomId)
+const buildOutput = resolve(buildDir, 'output')
+const nuxt = await loadNuxt({
+  cwd: rootDir,
+  overrides: {
+    buildDir,
+    nitro: {
+      output: {
+        dir: buildOutput,
+      },
+    },
+  },
+})
+await buildNuxt(nuxt)
+await setup({
+  rootDir,
+  buildDir,
+  nuxtConfig: {
+    nitro: {
+      output: {
+        dir: buildOutput,
+      },
+    },
+  },
+  build: false,
+})
+
+describe('build: false', () => {
+  it('runs a test', async () => {
+    const html = await $fetch('/')
+    expect(html.slice(0, 15)).toMatchInlineSnapshot(`
+      "<!DOCTYPE html>"
+    `)
+  })
+})
@@ -0,0 +1,17 @@
+import { resolve } from 'node:path'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
+import { describe, expect, it } from 'vitest'
+
+await setup({
+  rootDir: resolve('../', import.meta.dirname),
+  dev: true,
+})
+
+describe('server (dev)', () => {
+  it('runs a test', async () => {
+    const html = await $fetch('/')
+    expect(html.slice(0, 15)).toMatchInlineSnapshot(`
+      "<!DOCTYPE html>"
+    `)
+  })
+})
@@ -0,0 +1,24 @@
+import { resolve } from 'node:path'
+import { glob } from 'tinyglobby'
+import { setup, useTestContext } from '@nuxt/test-utils/e2e'
+import { describe, expect, it } from 'vitest'
+
+await setup({
+  rootDir: resolve('../', import.meta.dirname),
+  nuxtConfig: {
+    nitro: {
+      prerender: {
+        routes: ['/test'],
+      },
+    },
+  },
+})
+
+describe('generate test', () => {
+  it('can assert files are prerendered', async () => {
+    const ctx = useTestContext()
+    const outputDir = resolve(ctx.nuxt!.options.nitro.output?.dir || '', 'public')
+    const files = await glob('**/*.html', { cwd: outputDir })
+    expect(files).toContain('test/index.html')
+  })
+})
@@ -0,0 +1,17 @@
+import { resolve } from 'node:path'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
+import { describe, expect, it } from 'vitest'
+
+await setup({
+  rootDir: resolve('../', import.meta.dirname),
+  server: true,
+})
+
+describe('app', async () => {
+  it('runs a test', async () => {
+    const html = await $fetch('/')
+    expect(html.slice(0, 15)).toMatchInlineSnapshot(`
+      "<!DOCTYPE html>"
+    `)
+  })
+})
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
@@ -0,0 +1,3 @@
+export interface MyComponentProps {
+  title: string
+}
@@ -0,0 +1,5 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+export default defineVitestConfig({
+  // any custom vitest config you require
+})
@@ -0,0 +1,8 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+export default defineVitestConfig({
+  // any custom vitest config you require
+  test: {
+    include: ['test/**/*.e2e.spec.ts'],
+  },
+})
@@ -0,0 +1,4 @@
+console.log('THIS IS LOADING')
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/tailwindcss'],
+})
@@ -0,0 +1,11 @@
+{
+  "name": "my-nuxt-layer",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "dependencies": {
+    "nuxt": "catalog:",
+    "@nuxtjs/tailwindcss": "6.14.0"
+  }
+}
@@ -109,7 +109,7 @@
     "installed-check": "9.3.0",
     "knip": "5.58.1",
     "nitropack": "2.11.12",
-    "nuxt": "3.17.5",
+    "nuxt": "catalog:",
     "pkg-pr-new": "0.0.50",
     "playwright-core": "1.52.0",
     "rollup": "4.41.1",