diff --git a/examples/app-vitest-browser/app.vue b/examples/app-vitest-browser/app.vue
deleted file mode 100644
index 1214e5b39..000000000
--- a/examples/app-vitest-browser/app.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <div>
-    <NuxtWelcome />
-    <MyComponent title="My title" />
-  </div>
-</template>
diff --git a/examples/app-vitest-browser/app/app.vue b/examples/app-vitest-browser/app/app.vue
new file mode 100644
index 000000000..f8eacfa73
--- /dev/null
+++ b/examples/app-vitest-browser/app/app.vue
@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
diff --git a/examples/app-vitest-browser/app/components/Header.vue b/examples/app-vitest-browser/app/components/Header.vue
new file mode 100644
index 000000000..74f07b118
--- /dev/null
+++ b/examples/app-vitest-browser/app/components/Header.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { public: { site } } = useRuntimeConfig()
+</script>
+
+<template>
+  <header>
+    <h1>{{ site.title }}</h1>
+    <nav>
+      <ul>
+        <NuxtLink to="/">Top</NuxtLink>
+      </ul>
+    </nav>
+  </header>
+</template>
diff --git a/examples/app-vitest-browser/components/MyCounter.vue b/examples/app-vitest-browser/app/components/MyCounter.vue
similarity index 73%
rename from examples/app-vitest-browser/components/MyCounter.vue
rename to examples/app-vitest-browser/app/components/MyCounter.vue
index 8e996c21c..e3adad54a 100644
--- a/examples/app-vitest-browser/components/MyCounter.vue
+++ b/examples/app-vitest-browser/app/components/MyCounter.vue
@@ -12,14 +12,6 @@
 </template>
 
 <script setup lang="ts">
-const count = ref(0)
 const config = useRuntimeConfig()
-
-const increment = () => {
-  count.value++
-}
-
-const decrement = () => {
-  count.value--
-}
+const { count, increment, decrement } = useCounter()
 </script>
diff --git a/examples/app-vitest-browser/app/components/MyHello.vue b/examples/app-vitest-browser/app/components/MyHello.vue
new file mode 100644
index 000000000..4c846f1f8
--- /dev/null
+++ b/examples/app-vitest-browser/app/components/MyHello.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const name = defineModel<string>({ default: () => '' })
+const { data } = useHelloApi(name)
+</script>
+
+<template>
+  <div>
+    <label for="name">Name</label>
+    <input
+      id="name"
+      v-model="name"
+    >
+    <br>
+    <label for="message">Message</label>
+    <textarea
+      id="message"
+      :value="data.message"
+      readonly
+    />
+  </div>
+</template>
diff --git a/examples/app-vitest-browser/app/composables/useCounter.ts b/examples/app-vitest-browser/app/composables/useCounter.ts
new file mode 100644
index 000000000..c04df287d
--- /dev/null
+++ b/examples/app-vitest-browser/app/composables/useCounter.ts
@@ -0,0 +1,13 @@
+export function useCounter() {
+  const count = ref(0)
+
+  const increment = () => {
+    count.value++
+  }
+
+  const decrement = () => {
+    count.value--
+  }
+
+  return { count, increment, decrement }
+}
diff --git a/examples/app-vitest-browser/app/composables/useHelloApi.ts b/examples/app-vitest-browser/app/composables/useHelloApi.ts
new file mode 100644
index 000000000..e6ca1c77d
--- /dev/null
+++ b/examples/app-vitest-browser/app/composables/useHelloApi.ts
@@ -0,0 +1,14 @@
+export function useHelloApi(name: Ref<string>) {
+  const {
+    data,
+    pending,
+  } = useFetch('/api/hello', {
+    query: reactive({ name }),
+    default: () => ({ message: '' }),
+  })
+
+  return {
+    data,
+    pending,
+  }
+}
diff --git a/examples/app-vitest-browser/app/layouts/default.vue b/examples/app-vitest-browser/app/layouts/default.vue
new file mode 100644
index 000000000..c6f30a1cf
--- /dev/null
+++ b/examples/app-vitest-browser/app/layouts/default.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
+<template>
+  <div>
+    <Header />
+    <main>
+      <h2>{{ route.meta.title }}</h2>
+      <slot />
+    </main>
+  </div>
+</template>
diff --git a/examples/app-vitest-browser/app/pages/components.vue b/examples/app-vitest-browser/app/pages/components.vue
new file mode 100644
index 000000000..605788594
--- /dev/null
+++ b/examples/app-vitest-browser/app/pages/components.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Components',
+})
+</script>
+
+<template>
+  <section>
+    <ul>
+      <li
+        v-for="name of ['counter', 'hello']"
+        :key="name"
+      >
+        <NuxtLink :to="`/components/${name}`">
+          {{ `${name[0]?.toUpperCase()}${name.substring(1)}` }}
+        </NuxtLink>
+      </li>
+    </ul>
+    <NuxtPage />
+  </section>
+</template>
diff --git a/examples/app-vitest-browser/app/pages/components/counter.vue b/examples/app-vitest-browser/app/pages/components/counter.vue
new file mode 100644
index 000000000..d2006eb17
--- /dev/null
+++ b/examples/app-vitest-browser/app/pages/components/counter.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Counter',
+})
+</script>
+
+<template>
+  <MyCounter />
+</template>
diff --git a/examples/app-vitest-browser/app/pages/components/hello.vue b/examples/app-vitest-browser/app/pages/components/hello.vue
new file mode 100644
index 000000000..51f2fda5f
--- /dev/null
+++ b/examples/app-vitest-browser/app/pages/components/hello.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const route = useRoute()
+const name = ref(route.query.name?.toString() || '')
+
+definePageMeta({
+  title: 'Hello',
+})
+</script>
+
+<template>
+  <MyHello v-model="name" />
+</template>
diff --git a/examples/app-vitest-browser/app/pages/index.vue b/examples/app-vitest-browser/app/pages/index.vue
new file mode 100644
index 000000000..ecb29e9f8
--- /dev/null
+++ b/examples/app-vitest-browser/app/pages/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Index',
+})
+</script>
+
+<template>
+  <ul>
+    <li>
+      <NuxtLink to="/components">
+        Components
+      </NuxtLink>
+    </li>
+  </ul>
+</template>
diff --git a/examples/app-vitest-browser/nuxt.config.ts b/examples/app-vitest-browser/nuxt.config.ts
index 42d1bde86..6fd9933fd 100644
--- a/examples/app-vitest-browser/nuxt.config.ts
+++ b/examples/app-vitest-browser/nuxt.config.ts
@@ -4,5 +4,12 @@ export default defineNuxtConfig({
   app: {
     rootId: 'nuxt-test',
   },
+  runtimeConfig: {
+    public: {
+      site: {
+        title: 'Vitest Browser Mode',
+      },
+    },
+  },
   compatibilityDate: '2024-04-03',
 })
diff --git a/examples/app-vitest-browser/server/api/hello.get.ts b/examples/app-vitest-browser/server/api/hello.get.ts
new file mode 100644
index 000000000..058fdb64f
--- /dev/null
+++ b/examples/app-vitest-browser/server/api/hello.get.ts
@@ -0,0 +1,7 @@
+import { defineEventHandler, getQuery } from 'h3'
+
+export default defineEventHandler((event) => {
+  const query = getQuery<{ name?: string | string[] }>(event)
+  const name = Array.isArray(query.name) ? query.name[0] : query.name
+  return { message: `Hello ${name || 'Unknown'}!` }
+})
diff --git a/examples/app-vitest-browser/test/nuxt/components/mock-nuxt-import.spec.ts b/examples/app-vitest-browser/test/nuxt/components/mock-nuxt-import.spec.ts
new file mode 100644
index 000000000..ab1125b4a
--- /dev/null
+++ b/examples/app-vitest-browser/test/nuxt/components/mock-nuxt-import.spec.ts
@@ -0,0 +1,45 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { page } from 'vitest/browser'
+import { mockNuxtImport } from '@nuxt/test-utils/runtime'
+import { MyCounter, MyHello } from '#components'
+
+mockNuxtImport(useCounter, vi.fn)
+mockNuxtImport(useHelloApi, vi.fn)
+
+describe('Mock Nuxt Import', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    vi.restoreAllMocks()
+  })
+
+  it('useCounter', async () => {
+    const decrement = vi.fn()
+
+    vi.mocked(useCounter).mockImplementation(() => ({
+      count: ref(100),
+      increment: vi.fn(),
+      decrement,
+    }))
+
+    const screen = await page.render(MyCounter)
+    await expect.element(screen.getByText('Count: 100')).toBeInTheDocument()
+
+    const button = screen.getByRole('button', { name: 'Decrement' })
+    await expect.element(button).toBeInTheDocument()
+    await button.click()
+
+    expect(decrement).toHaveBeenCalledOnce()
+  })
+
+  it('useHelloApi', async () => {
+    vi.mocked(useHelloApi).mockImplementation(() => ({
+      data: ref({ message: '(Mocked)' }),
+      pending: ref(false),
+    }))
+
+    const screen = await page.render(MyHello)
+    const message = screen.getByRole('textbox', { name: 'Message' })
+    await expect.element(message).toBeInTheDocument()
+    await expect.element(message).toHaveValue('(Mocked)')
+  })
+})
diff --git a/examples/app-vitest-browser/test/mount-suspended.spec.ts b/examples/app-vitest-browser/test/nuxt/components/mount-suspended.spec.ts
similarity index 86%
rename from examples/app-vitest-browser/test/mount-suspended.spec.ts
rename to examples/app-vitest-browser/test/nuxt/components/mount-suspended.spec.ts
index cb8c77fea..7e3f56a20 100644
--- a/examples/app-vitest-browser/test/mount-suspended.spec.ts
+++ b/examples/app-vitest-browser/test/nuxt/components/mount-suspended.spec.ts
@@ -12,7 +12,7 @@ describe('Component (MyCounter)', () => {
 
   it('can be interacted with (increment)', async () => {
     const component = await mountSuspended(MyCounter)
-    const incrementButton = component.findAll('button').filter(btn => btn.text().includes('Increment'))[0]
+    const incrementButton = component.findAll('button').filter(btn => btn.text().includes('Increment'))[0]!
     incrementButton.element.click()
     await nextTick()
     expect(component.text()).toContain('Count: 1')
@@ -20,7 +20,7 @@ describe('Component (MyCounter)', () => {
 
   it('can be interacted with (decrement)', async () => {
     const component = await mountSuspended(MyCounter)
-    const decrementButton = component.findAll('button').filter(btn => btn.text().includes('Decrement'))[0]
+    const decrementButton = component.findAll('button').filter(btn => btn.text().includes('Decrement'))[0]!
     decrementButton.element.click()
     await nextTick()
     expect(component.text()).toContain('Count: -1')
@@ -28,6 +28,6 @@ describe('Component (MyCounter)', () => {
 
   it('can use Nuxt-specific composables', async () => {
     const component = await mountSuspended(MyCounter)
-    expect(component.text()).toContain('"buildAssetsDir": "/_nuxt/"')
+    expect(component.text()).toMatch(/"buildAssetsDir"\s*:\s*"\/_nuxt\/"/)
   })
 })
diff --git a/examples/app-vitest-browser/test/nuxt/components/render-with-fetch.spec.ts b/examples/app-vitest-browser/test/nuxt/components/render-with-fetch.spec.ts
new file mode 100644
index 000000000..7c172accf
--- /dev/null
+++ b/examples/app-vitest-browser/test/nuxt/components/render-with-fetch.spec.ts
@@ -0,0 +1,41 @@
+import { describe, it, expect, afterAll } from 'vitest'
+import { registerEndpoint } from '@nuxt/test-utils/runtime'
+import { render } from '@nuxt/test-utils/vitest-browser-nuxt'
+
+import { MyHello } from '#components'
+
+const cleanups = [
+  registerEndpoint(
+    '/api/hello',
+    await import('#server/api/hello.get').then(r => r.default),
+  ),
+]
+
+describe('Render Component (MyHello)', () => {
+  afterAll(() => cleanups.forEach(fn => fn()))
+
+  it('renders', async () => {
+    const screen = await render(MyHello)
+    const message = screen.getByLabelText('Message')
+    await expect.element(message).toHaveValue('Hello Unknown!')
+  })
+
+  it('can be interacted with input', async () => {
+    const screen = await render(MyHello)
+
+    const name = screen.getByLabelText('Name')
+    await name.fill('Nuxt')
+
+    const message = screen.getByLabelText('Message')
+    await expect.element(message).toHaveValue('Hello Nuxt!')
+  })
+
+  it('can be rerender', async () => {
+    const screen = await render(MyHello)
+
+    await screen.rerender({ modelValue: 'Nuxt App' })
+
+    const message = screen.getByLabelText('Message')
+    await expect.element(message).toHaveValue('Hello Nuxt App!')
+  })
+})
diff --git a/examples/app-vitest-browser/test/nuxt/components/render.spec.ts b/examples/app-vitest-browser/test/nuxt/components/render.spec.ts
new file mode 100644
index 000000000..dd8995145
--- /dev/null
+++ b/examples/app-vitest-browser/test/nuxt/components/render.spec.ts
@@ -0,0 +1,166 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render } from '@nuxt/test-utils/vitest-browser-nuxt'
+import { MyCounter } from '#components'
+
+describe('Render Component', () => {
+  it('renders', async () => {
+    const { getByText } = await render(MyCounter)
+    expect(getByText('Count: 0')).toBeInTheDocument()
+  })
+
+  it('can be interacted with (increment)', async () => {
+    const { getByText } = await render(MyCounter)
+    const incrementButton = getByText('Increment')
+    await incrementButton.click()
+    expect(getByText('Count: 1')).toBeInTheDocument()
+  })
+
+  it('can be interacted with (decrement)', async () => {
+    const { getByText } = await render(MyCounter)
+    const decrementButton = getByText('Decrement')
+    await decrementButton.click()
+    expect(getByText('Count: -1')).toBeInTheDocument()
+  })
+
+  it('can use Nuxt-specific composables', async () => {
+    const { getByText } = await render(MyCounter)
+    const config = getByText('Runtime Config:')
+    expect(config).toBeInTheDocument()
+    expect(config).toHaveTextContent(/"buildAssetsDir"\s*:\s*"\/_nuxt\/"/)
+  })
+
+  it('rerender', async () => {
+    const screen = await render(defineComponent({
+      props: {
+        name: {
+          type: String,
+          default: 'Unknown',
+        },
+      },
+      setup(props) {
+        return () => h('h1', {}, `Hello ${props.name}!`)
+      },
+    }))
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Hello Unknown!')
+
+    await screen.rerender({ name: 'Nuxt' })
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Hello Nuxt!')
+  })
+
+  it('locator', async () => {
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    expect(screen.locator.getByRole('heading')).toHaveTextContent('Hello Nuxt!')
+  })
+
+  it('baseElement(default)', async () => {
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Hello Nuxt!')
+
+    expect(screen.baseElement).toHaveTextContent('Hello Nuxt!')
+  })
+
+  it('baseElement(document.body)', async () => {
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }), { baseElement: document.body })
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Hello Nuxt!')
+
+    expect(screen.baseElement).toBe(document.body)
+    expect(screen.baseElement).toContainElement(screen.container)
+    expect(screen.baseElement).toHaveTextContent('Hello Nuxt!')
+
+    expect(screen.container).toHaveTextContent('Hello Nuxt!')
+
+    await screen.unmount()
+
+    expect(screen.baseElement).toContainElement(screen.container)
+  })
+
+  it('baseElement(custom element)', async ({ onTestFinished }) => {
+    const baseElement = document.body.appendChild(document.createElement('div'))
+    onTestFinished(() => baseElement.remove())
+
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }), { baseElement })
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Hello Nuxt!')
+
+    expect(screen.baseElement).toBe(baseElement)
+    expect(screen.baseElement).toContainElement(screen.container)
+    expect(screen.baseElement).toHaveTextContent('Hello Nuxt!')
+
+    expect(screen.container).toHaveTextContent('Hello Nuxt!')
+
+    await screen.unmount()
+
+    expect(screen.baseElement).not.toContainElement(screen.container)
+  })
+
+  it('container(default)', async () => {
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Hello Nuxt!')
+
+    expect(screen.baseElement).toBe(document.body)
+    expect(screen.baseElement).toContainElement(screen.container)
+    expect(screen.baseElement).toHaveTextContent('Hello Nuxt!')
+
+    expect(screen.container).toHaveTextContent('Hello Nuxt!')
+    expect(screen.container).toHaveAttribute('id', 'nuxt-test')
+
+    await screen.unmount()
+
+    expect(screen.baseElement).toContainElement(screen.container)
+  })
+
+  it('container(custom element)', async ({ onTestFinished }) => {
+    const container = document.body.appendChild(document.createElement('div'))
+    onTestFinished(() => container.remove())
+
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }), { container })
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Hello Nuxt!')
+
+    expect(screen.baseElement).toBe(document.body)
+    expect(screen.baseElement).toContainElement(screen.container)
+    expect(screen.baseElement).toHaveTextContent('Hello Nuxt!')
+
+    expect(screen.container).toBe(container)
+    expect(screen.container).toHaveTextContent('Hello Nuxt!')
+
+    await screen.unmount()
+
+    expect(screen.baseElement).toContainElement(screen.container)
+  })
+
+  it('umount', async () => {
+    const onBeforeUnmountFn = vi.fn()
+    const screen = await render(defineComponent({
+      setup() {
+        onBeforeUnmount(onBeforeUnmountFn)
+      },
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    await screen.unmount()
+
+    expect(screen.container).toHaveAttribute('id', 'nuxt-test')
+    expect(screen.container).toBeEmptyDOMElement()
+
+    expect(onBeforeUnmountFn).toHaveBeenCalledOnce()
+  })
+})
diff --git a/examples/app-vitest-browser/test/component.test.ts b/examples/app-vitest-browser/test/nuxt/components/render.vue.spec.ts
similarity index 66%
rename from examples/app-vitest-browser/test/component.test.ts
rename to examples/app-vitest-browser/test/nuxt/components/render.vue.spec.ts
index ca0bcccc9..83d681002 100644
--- a/examples/app-vitest-browser/test/component.test.ts
+++ b/examples/app-vitest-browser/test/nuxt/components/render.vue.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { render } from 'vitest-browser-vue'
 import { MyCounter } from '#components'
 
-describe('Component (MyCounter)', () => {
+describe('Render(vue) Component', () => {
   it('renders', () => {
     const { getByText } = render(MyCounter)
     expect(getByText('Count: 0')).toBeInTheDocument()
@@ -24,6 +24,16 @@ describe('Component (MyCounter)', () => {
 
   it('can use Nuxt-specific composables', () => {
     const { getByText } = render(MyCounter)
-    expect(getByText('"buildAssetsDir": "/_nuxt/"')).toBeInTheDocument()
+    const config = getByText('Runtime Config:')
+    expect(config).toBeInTheDocument()
+    expect(config).toHaveTextContent(/"buildAssetsDir"\s*:\s*"\/_nuxt\/"/)
+  })
+
+  it('locator', async () => {
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    expect(screen.locator.getByRole('heading')).toHaveTextContent('Hello Nuxt!')
   })
 })
diff --git a/examples/app-vitest-browser/test/nuxt/pages/render-components-hello.spec.ts b/examples/app-vitest-browser/test/nuxt/pages/render-components-hello.spec.ts
new file mode 100644
index 000000000..ebe2c5194
--- /dev/null
+++ b/examples/app-vitest-browser/test/nuxt/pages/render-components-hello.spec.ts
@@ -0,0 +1,56 @@
+import { describe, it, expect, afterAll } from 'vitest'
+import { page } from 'vitest/browser'
+import { registerEndpoint } from '@nuxt/test-utils/runtime'
+
+import App from '~/app.vue'
+
+const cleanups = [
+  registerEndpoint(
+    '/api/hello',
+    await import('#server/api/hello.get').then(r => r.default),
+  ),
+]
+
+describe('Render Page (/components/hello)', () => {
+  afterAll(() => cleanups.forEach(fn => fn()))
+
+  it('can display title from runtimeConfig', async () => {
+    const screen = await page.render(App, { route: '/components/hello' })
+
+    const header = screen.getByRole('banner')
+    await expect.element(header).toBeInTheDocument()
+
+    const title = header.getByRole('heading')
+    await expect.element(title).toBeInTheDocument()
+    await expect.element(title).toHaveTextContent('Vitest Browser Mode')
+  })
+
+  it('can display title from route.meta', async () => {
+    const screen = await page.render(App, { route: '/components/hello' })
+
+    const main = screen.getByRole('main')
+    await expect.element(main).toBeInTheDocument()
+
+    const title = main.getByRole('heading')
+    await expect.element(title).toBeInTheDocument()
+    await expect.element(title).toHaveTextContent('Hello')
+  })
+
+  it('can render with fetch result', async () => {
+    const screen = await page.render(App, {
+      route: {
+        path: '/components/hello',
+        query: {
+          name: 'Nuxt App',
+        },
+      },
+    })
+
+    const main = screen.getByRole('main')
+    await expect.element(main).toBeInTheDocument()
+
+    const message = main.getByRole('textbox', { name: 'Message' })
+    await expect.element(message).toBeInTheDocument()
+    await expect.element(message).toHaveValue('Hello Nuxt App!')
+  })
+})
diff --git a/examples/app-vitest-browser/test/nuxt/pages/render-index.spec.ts b/examples/app-vitest-browser/test/nuxt/pages/render-index.spec.ts
new file mode 100644
index 000000000..0758aa276
--- /dev/null
+++ b/examples/app-vitest-browser/test/nuxt/pages/render-index.spec.ts
@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { page } from 'vitest/browser'
+
+import App from '~/app.vue'
+
+describe('Render Page (/)', () => {
+  it('can display title from runtimeConfig', async () => {
+    const screen = await page.render(App, { route: '/' })
+
+    const header = screen.getByRole('banner')
+    await expect.element(header).toBeInTheDocument()
+
+    const title = header.getByRole('heading')
+    await expect.element(title).toBeInTheDocument()
+    await expect.element(title).toHaveTextContent('Vitest Browser Mode')
+  })
+
+  it('can display title from route.meta', async () => {
+    const screen = await page.render(App, { route: '/' })
+
+    const main = screen.getByRole('main')
+    await expect.element(main).toBeInTheDocument()
+
+    const title = main.getByRole('heading')
+    await expect.element(title).toBeInTheDocument()
+    await expect.element(title).toHaveTextContent('Index')
+  })
+
+  it('can navigate via a link click', async () => {
+    const screen = await page.render(App, { route: '/' })
+
+    const main = screen.getByRole('main')
+    await expect.element(main).toBeInTheDocument()
+
+    const title = main.getByRole('heading')
+    await expect.element(title).toBeInTheDocument()
+    await expect.element(title).toHaveTextContent('Index')
+
+    const link = main.getByRole('link', { name: 'Components' })
+    await expect.element(link).toBeInTheDocument()
+    await link.click()
+
+    await expect.element(title).toHaveTextContent('Components')
+  })
+})
diff --git a/examples/app-vitest-browser/tsconfig.json b/examples/app-vitest-browser/tsconfig.json
index b55ac8e40..6ae5970c7 100644
--- a/examples/app-vitest-browser/tsconfig.json
+++ b/examples/app-vitest-browser/tsconfig.json
@@ -1,3 +1,17 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
-} 
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}
diff --git a/examples/app-vitest-browser/vitest.config.ts b/examples/app-vitest-browser/vitest.config.ts
index f463fed8c..48f240322 100644
--- a/examples/app-vitest-browser/vitest.config.ts
+++ b/examples/app-vitest-browser/vitest.config.ts
@@ -9,6 +9,6 @@ export default defineVitestConfig({
       instances: [{ browser: 'chromium' }],
     },
     environment: 'nuxt',
-    setupFiles: ['vitest-browser-vue'],
+    setupFiles: ['@nuxt/test-utils/vitest-browser-nuxt'],
   },
 })
diff --git a/examples/app-vitest-workspace/app3/nuxt.config.ts b/examples/app-vitest-workspace/app3/nuxt.config.ts
index b377d542b..b816ec73a 100644
--- a/examples/app-vitest-workspace/app3/nuxt.config.ts
+++ b/examples/app-vitest-workspace/app3/nuxt.config.ts
@@ -4,5 +4,13 @@ export default defineNuxtConfig({
     autoImport: false,
   },
   devtools: { enabled: true },
+  app: {
+    rootId: false,
+  },
   compatibilityDate: '2024-04-03',
+  typescript: {
+    tsConfig: {
+      include: ['../test/browser/**/*'],
+    },
+  },
 })
diff --git a/examples/app-vitest-workspace/app3/test/browser/render.spec.ts b/examples/app-vitest-workspace/app3/test/browser/render.spec.ts
new file mode 100644
index 000000000..ccadab8f1
--- /dev/null
+++ b/examples/app-vitest-workspace/app3/test/browser/render.spec.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import { page } from 'vitest/browser'
+
+import { render } from '@nuxt/test-utils/vitest-browser-nuxt'
+
+import { defineComponent, h } from '#imports'
+import { Counter } from '#components'
+
+import App from '~~/app.vue'
+
+describe('render', () => {
+  it('can render', async () => {
+    const screen = await render(App, { route: '/' })
+
+    const title = screen.getByRole('heading')
+    await expect.element(title).toHaveTextContent('Index')
+  })
+
+  it('can render with page', async () => {
+    const screen = await page.render(App, { route: '/' })
+
+    const title = screen.getByRole('heading')
+    await expect.element(title).toHaveTextContent('Index')
+  })
+
+  it('can rerender', async () => {
+    const screen = await render(Counter, { props: { title: 'Title' } })
+
+    const title = screen.getByRole('heading')
+    await screen.rerender({ title: 'Title(Updated)' })
+
+    await expect.element(title).toHaveTextContent('Title(Updated)')
+  })
+
+  it('can rerender with page', async () => {
+    const screen = await page.render(Counter, { props: { title: 'Title' } })
+
+    const title = screen.getByRole('heading')
+    await screen.rerender({ title: 'Title(Updated)' })
+
+    await expect.element(title).toHaveTextContent('Title(Updated)')
+  })
+
+  it('umount', async () => {
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    await screen.unmount()
+
+    await expect.element(screen.container).toHaveAttribute('id', 'nuxt-test')
+    await expect.element(screen.container).toBeEmptyDOMElement()
+  })
+})
diff --git a/examples/app-vitest-workspace/app3/vitest.browser.config.ts b/examples/app-vitest-workspace/app3/vitest.browser.config.ts
new file mode 100644
index 000000000..0e14fc01b
--- /dev/null
+++ b/examples/app-vitest-workspace/app3/vitest.browser.config.ts
@@ -0,0 +1,23 @@
+import { fileURLToPath } from 'node:url'
+import { defineVitestProject } from '@nuxt/test-utils/config'
+import { playwright } from '@vitest/browser-playwright'
+
+export default defineVitestProject({
+  test: {
+    name: 'nuxt-app3:browser',
+    include: ['test/browser/**/*.spec.ts'],
+    environment: 'nuxt',
+    environmentOptions: {
+      nuxt: {
+        rootDir: fileURLToPath(new URL('.', import.meta.url)),
+      },
+    },
+    browser: {
+      enabled: true,
+      headless: true,
+      screenshotFailures: false,
+      provider: playwright(),
+      instances: [{ browser: 'chromium' }],
+    },
+  },
+})
diff --git a/examples/app-vitest-workspace/app3/vitest.config.ts b/examples/app-vitest-workspace/app3/vitest.config.ts
index e11c7d6d8..21b20d7eb 100644
--- a/examples/app-vitest-workspace/app3/vitest.config.ts
+++ b/examples/app-vitest-workspace/app3/vitest.config.ts
@@ -3,7 +3,8 @@ import { defineVitestProject } from '@nuxt/test-utils/config'
 
 export default defineVitestProject({
   test: {
-    name: 'nuxt-app3',
+    name: 'nuxt-app3:nuxt',
+    include: ['test/nuxt/**/*.spec.ts'],
     environmentOptions: {
       nuxt: {
         rootDir: fileURLToPath(new URL('.', import.meta.url)),
diff --git a/knip.json b/knip.json
index 1283990e5..d30656333 100644
--- a/knip.json
+++ b/knip.json
@@ -30,7 +30,8 @@
         "happy-dom",
         "jsdom",
         "playwright-core",
-        "vitest"
+        "vitest",
+        "vitest-browser-vue"
       ]
     }
   },
diff --git a/package.json b/package.json
index fd4da7cd5..4695ff29e 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
     "./module": "./src/module.ts",
     "./runtime": "./src/runtime-utils/index.ts",
     "./vitest-environment": "./src/vitest-environment.ts",
+    "./vitest-browser-nuxt": "./src/vitest-browser-nuxt/index.ts",
+    "./vitest-browser-nuxt/pure": "./src/vitest-browser-nuxt/pure.ts",
     "./package.json": "./package.json"
   },
   "imports": {
@@ -48,6 +50,12 @@
       ],
       "vitest-environment": [
         "./dist/vitest-environment.d.mts"
+      ],
+      "vitest-browser-nuxt": [
+        "./dist/vitest-browser-nuxt/index.d.mts"
+      ],
+      "vitest-browser-nuxt/pure": [
+        "./dist/vitest-browser-nuxt/pure.d.mts"
       ]
     }
   },
@@ -194,6 +202,8 @@
       "./module": "./dist/module.mjs",
       "./runtime": "./dist/runtime-utils/index.mjs",
       "./vitest-environment": "./dist/vitest-environment.mjs",
+      "./vitest-browser-nuxt": "./dist/vitest-browser-nuxt/index.mjs",
+      "./vitest-browser-nuxt/pure": "./dist/vitest-browser-nuxt/pure.mjs",
       "./package.json": "./package.json"
     }
   }
diff --git a/src/runtime-utils/utils/suspended.ts b/src/runtime-utils/utils/suspended.ts
index d6eb3bc4f..27c832b42 100644
--- a/src/runtime-utils/utils/suspended.ts
+++ b/src/runtime-utils/utils/suspended.ts
@@ -19,6 +19,8 @@ type WrapperFnComponent<Fn> = Fn extends (c: infer C, o: infer _) => infer _ ? C
 type WrapperFnOption<Fn> = Fn extends (c: WrapperFnComponent<Fn>, o: infer O) => infer _ ? O : never
 type WrapperFnResult<Fn> = Fn extends (c: WrapperFnComponent<Fn>, o: WrapperFnOption<Fn>) => infer R ? R : never
 
+type VueApp = App<Element> & Record<string, unknown>
+
 export type WrapperSuspendedOptions<Fn> = WrapperFnOption<Fn> & {
   route?: RouteLocationRaw | false
   scoped?: boolean
@@ -45,30 +47,41 @@ function runEffectScope<T>(fn: () => T) {
   return scope.run(fn)
 }
 
-export function wrapperSuspended<C, Fn extends WrapperFn<C>>(
+export function wrapperSuspended<
+  C,
+  Fn extends WrapperFn<C>,
+  Opts extends WrapperSuspendedOptions<Fn>,
+>(
   component: C,
-  options: WrapperSuspendedOptions<Fn>,
+  options: Opts,
   {
     wrapperFn,
     wrappedRender = fn => fn,
+    overrideOptionsFn = () => {},
     suspendedHelperName,
     clonedComponentName,
+    stubRouterLink = true,
   }: {
     wrapperFn: NonNullable<Fn>
     wrappedRender?: (render: () => VNode) => () => VNode
+    overrideOptionsFn?: (options: Opts, vueApp: VueApp) => void
     suspendedHelperName: string
     clonedComponentName: string
+    stubRouterLink?: boolean
   },
 ): Promise<{
   wrapper: WrapperSuspendedResult<Fn>
   setProps: (props: object) => void
 }> {
-  const { props = {}, attrs = {} } = options as ComponentMountingOptions<C>
-  const { route = '/', scoped = false, ...wrapperFnOptions } = options as ComponentMountingOptions<C>
-
   const vueApp: App<Element> & Record<string, unknown> = tryUseNuxtApp()?.vueApp
     // @ts-expect-error untyped global __unctx__
     || globalThis.__unctx__.get('nuxt-app').tryUse().vueApp
+
+  overrideOptionsFn(options, vueApp)
+
+  const { props = {}, attrs = {} } = options as ComponentMountingOptions<C>
+  const { route = '/', scoped = false, ...wrapperFnOptions } = options as ComponentMountingOptions<C>
+
   const {
     render: componentRender,
     setup: componentSetup,
@@ -204,7 +217,10 @@ export function wrapperSuspended<C, Fn extends WrapperFn<C>>(
             [SuspendedHelper.name]: false,
             [ClonedComponent.name]: false,
           },
-          components: { ...vueApp._context.components, RouterLink },
+          components: {
+            ...vueApp._context.components,
+            ...(stubRouterLink ? { RouterLink } : {}),
+          },
         }),
       },
     ) as WrapperSuspendedResult<Fn>
diff --git a/src/vitest-browser-nuxt/index.ts b/src/vitest-browser-nuxt/index.ts
new file mode 100644
index 000000000..182bbd17c
--- /dev/null
+++ b/src/vitest-browser-nuxt/index.ts
@@ -0,0 +1,20 @@
+import { page } from 'vitest/browser'
+import { beforeEach } from 'vitest'
+import { cleanup, render } from './pure.ts'
+
+export { render, cleanup, config } from './pure.ts'
+
+page.extend({
+  render,
+  [Symbol.for('vitest:component-cleanup')]: cleanup,
+})
+
+beforeEach(() => {
+  cleanup()
+})
+
+declare module 'vitest/browser' {
+  interface BrowserPage {
+    render: typeof render
+  }
+}
diff --git a/src/vitest-browser-nuxt/pure.ts b/src/vitest-browser-nuxt/pure.ts
new file mode 100644
index 000000000..305d259ea
--- /dev/null
+++ b/src/vitest-browser-nuxt/pure.ts
@@ -0,0 +1,187 @@
+import type { Locator, LocatorSelectors, PrettyDOMOptions } from 'vitest/browser'
+import { page, server, utils } from 'vitest/browser'
+import { mount as wrapperFn } from '@vue/test-utils'
+
+import type { WrapperSuspendedOptions } from '../runtime-utils/utils/suspended.ts'
+import { cleanupAll, wrapperSuspended } from '../runtime-utils/utils/suspended.ts'
+
+export { config } from '@vue/test-utils'
+
+type OmitKey<T, K extends keyof T> = { [P in keyof T as P extends K ? never : P]: T[P] }
+
+type ComponentProps<T> = T extends new (...args: never[]) => {
+  $props: infer P
+} ? NonNullable<P> : T extends (props: infer P, ...args: never[]) => unknown ? P : object
+
+type WrapperFn<C> = typeof wrapperFn<C>
+type WrapperOptions<C> = OmitKey<WrapperSuspendedOptions<WrapperFn<C>>, 'attachTo'> & {
+  /** Use this option instead of the `@vue/test-utils` `attachTo` option. */
+  container?: HTMLElement
+  baseElement?: HTMLElement
+}
+
+const mountedWrappers = new Set<Pick<ReturnType<typeof wrapperFn>, 'unmount'>>()
+
+let idx = 0
+function ensureTestIdAttribute(element: HTMLElement) {
+  const attributeId = server.config.browser.locators.testIdAttribute
+  if (!element.hasAttribute(attributeId)) {
+    element.setAttribute(attributeId, `__vitest_${idx++}__`)
+  }
+}
+
+export interface RenderResult<Props> extends LocatorSelectors {
+  container: HTMLElement
+  baseElement: HTMLElement
+  locator: Locator
+  debug(
+    el?: HTMLElement | HTMLElement[] | Locator | Locator[],
+    maxLength?: number, options?:
+    PrettyDOMOptions
+  ): void
+  /** Unmount the component. Also records a `nuxt.unmount` trace mark. */
+  unmount(): Promise<void>
+  emitted<T = unknown>(): Record<string, T[]>
+  emitted<T = unknown[]>(eventName: string): undefined | T[]
+  /** Re-render the component with new props. Also records a `nuxt.rerender` trace mark. */
+  rerender(props: Partial<Props>): Promise<void>
+}
+
+/**
+ * `render` allows you to mount any vue component within the vitest browser mode.
+ *
+ * ```ts
+ * import { page } from 'vitest/browser'
+ * import { render } from '@nuxt/test-utils/vitest-browser-nuxt'
+ *
+ * it('can render', async () => {
+ *   const screen = await render(App, { route: '/' })
+ *
+ *   const title = screen.getByRole('heading')
+ *   await expect.element(title).toHaveTextContent('Index')
+ * })
+ *
+ * it('can render with page', async () => {
+ *   const screen = await page.render(App, { route: '/' })
+ *
+ *   const title = screen.getByRole('heading')
+ *   await expect.element(title).toHaveTextContent('Index')
+ * })
+ * ```
+ *
+ * @param component the component to be tested
+ * @param options optional options to set up your component
+ */
+export async function render<T>(
+  component: T,
+  options: WrapperOptions<T> = {},
+): Promise<RenderResult<ComponentProps<T>>> {
+  const {
+    container,
+    baseElement,
+    wrapper,
+  } = await mountWrapperSuspended(component, options)
+
+  ensureTestIdAttribute(container)
+  ensureTestIdAttribute(baseElement)
+
+  const { debug, getElementLocatorSelectors } = utils
+
+  const renderResult: RenderResult<ComponentProps<T>> = {
+    container,
+    baseElement,
+    locator: page.elementLocator(container),
+    debug: (el = container, maxLength, options) => debug(el, maxLength, options),
+    unmount: async () => {
+      wrapper.unmount()
+      mountedWrappers.delete(wrapper)
+      await mark(renderResult.locator, 'nuxt.unmount', renderResult.rerender)
+    },
+    emitted: ((name?: string) => wrapper.emitted(name!)) as never,
+    rerender: async (props) => {
+      await wrapper.setProps(props as never)
+      await mark(renderResult.locator, 'nuxt.rerender', renderResult.rerender)
+    },
+    ...getElementLocatorSelectors(container),
+  }
+
+  return renderResult
+}
+
+export function cleanup(): void {
+  mountedWrappers.forEach((wrapper) => {
+    wrapper.unmount()
+    mountedWrappers.delete(wrapper)
+  })
+}
+
+async function mark(locator: Locator, name: string, fn: (...args: never[]) => unknown) {
+  if (!locator.mark) {
+    return
+  }
+
+  const error = new Error(name)
+  if ('captureStackTrace' in Error) {
+    Error.captureStackTrace(error, fn)
+  }
+
+  return locator.mark(name, error)
+}
+
+function unwrapNode(node: Element | null) {
+  if (node && typeof node.replaceWith === 'function') {
+    node.replaceWith(...node.childNodes)
+  }
+}
+
+async function mountWrapperSuspended<T>(
+  component: T,
+  options: WrapperOptions<T> = {},
+) {
+  const wrapperOptions = { ...options }
+
+  cleanupAll()
+
+  let container!: HTMLElement
+  let baseElement!: HTMLElement
+  let createdContainer: HTMLElement | undefined
+
+  const { wrapper, setProps } = await wrapperSuspended(component, wrapperOptions, {
+    wrapperFn,
+    overrideOptionsFn(options, vueApp) {
+      baseElement = options.baseElement || document.body
+      if (options.container) {
+        container = options.container
+      }
+      else if (baseElement.contains(vueApp._container)) {
+        container = vueApp._container as HTMLElement
+      }
+      else {
+        container = baseElement.appendChild(document.createElement('div'))
+        createdContainer = container
+      }
+      options.attachTo = container
+    },
+    suspendedHelperName: 'BrowserSuspendedHelper',
+    clonedComponentName: 'BrowserSuspendedComponent',
+    stubRouterLink: false,
+  })
+
+  Object.assign(wrapper, { __setProps: setProps })
+
+  const _unmount = wrapper.unmount.bind(wrapper)
+  wrapper.unmount = () => {
+    _unmount()
+    createdContainer?.remove()
+  }
+
+  mountedWrappers.add(wrapper)
+  unwrapNode(wrapper.element.parentElement)
+
+  return {
+    container,
+    baseElement,
+    wrapper,
+    setProps,
+  }
+}
diff --git a/tsdown.config.ts b/tsdown.config.ts
index df255311a..6317e46fd 100644
--- a/tsdown.config.ts
+++ b/tsdown.config.ts
@@ -26,6 +26,8 @@ export default defineConfig([
       'src/vitest-environment.ts',
       'src/vitest-wrapper/cli.ts',
       'src/runtime-utils/index.ts',
+      'src/vitest-browser-nuxt/index.ts',
+      'src/vitest-browser-nuxt/pure.ts',
     ],
     deps: {
       onlyBundle: [],