fix(runtime): add multi-app support for global var __NUXT__

examples/app-vitest-workspace/app3/test/nuxt/mountSuspended.spec.ts

@@ -2,7 +2,7 @@ import { afterEach, describe, expect, it } from 'vitest'
 import { enableAutoUnmount } from '@vue/test-utils'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 
-import App from '~~/app.vue'
+import App from '~/app.vue'
 import { Counter } from '#components'
 
 describe('mountSuspended', () => {

examples/app-vitest-workspace/app3/test/nuxt/renderSuspended.spec.ts

@@ -2,7 +2,7 @@ import { afterEach, describe, expect, it } from 'vitest'
 import { fireEvent, cleanup } from '@testing-library/vue'
 import { renderSuspended } from '@nuxt/test-utils/runtime'
 
-import App from '~~/app.vue'
+import App from '~/app.vue'
 import { Counter } from '#components'
 
 describe('renderSuspended', () => {

examples/multi-app/app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

examples/multi-app/app/components/Counter.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h2>{{ title }}</h2>
+    <label for="count">
+      Count
+    </label>
+    <input
+      id="count"
+      v-model="count"
+      type="number"
+    >
+    <button @click="increment">
+      Increment
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCounter } from '#imports'
+
+const {
+  title = 'Counter Component',
+} = defineProps<{
+  title?: string
+}>()
+
+const { count, increment } = useCounter()
+</script>

examples/multi-app/app/composables/useCounter.ts

@@ -0,0 +1,11 @@
+import { ref } from '#imports'
+
+export function useCounter() {
+  const count = ref(0)
+
+  function increment() {
+    count.value++
+  }
+
+  return { count, increment }
+}

examples/multi-app/app/pages/counter.vue

@@ -0,0 +1,3 @@
+<template>
+  <Counter />
+</template>

examples/multi-app/app/pages/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Index</h1>
+    <NuxtLink to="/counter">Counter</NuxtLink>
+  </div>
+</template>

examples/multi-app/nuxt.config.ts

@@ -0,0 +1,12 @@
+export default defineNuxtConfig({
+  appId: 'main-app',
+  future: {
+    multiApp: true,
+  },
+  compatibilityDate: '2024-04-03',
+  typescript: {
+    tsConfig: {
+      include: ['../test/browser/**/*.spec.ts'],
+    },
+  },
+})

examples/multi-app/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "example-multi-app",
+  "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": "^4.5.1"
+  },
+  "devDependencies": {
+    "@nuxt/test-utils": "latest",
+    "@vitest/browser-playwright": "4.1.10",
+    "@vitest/browser": "4.1.10",
+    "@vue/test-utils": "2.4.11",
+    "happy-dom": "20.11.1",
+    "nuxt": "4.5.1",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}

examples/multi-app/test/browser/mount.spec.ts

@@ -0,0 +1,34 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { enableAutoUnmount } from '@vue/test-utils'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+
+import App from '~/app.vue'
+import { Counter } from '#components'
+
+describe('mount', () => {
+  enableAutoUnmount(afterEach)
+
+  it('should mount page', async () => {
+    const wrapper = await mountSuspended(App, {
+      route: '/',
+    })
+
+    const title = wrapper.find('h1')
+    expect(title.text()).toBe('Index')
+
+    const link = wrapper.find('a[href="/counter"]')
+    expect(link.exists()).toBe(true)
+  })
+
+  it('should mount component', async () => {
+    const wrapper = await mountSuspended(Counter)
+
+    const title = wrapper.find('h2')
+    expect(title.exists()).toBe(true)
+    expect(title.text()).toBe('Counter Component')
+
+    const input = wrapper.find('input')
+    expect(input.exists()).toBe(true)
+    expect(input.element.value).toBe('0')
+  })
+})

examples/multi-app/test/nuxt/mount.spec.ts

@@ -0,0 +1,34 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { enableAutoUnmount } from '@vue/test-utils'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+
+import App from '~/app.vue'
+import { Counter } from '#components'
+
+describe('mount', () => {
+  enableAutoUnmount(afterEach)
+
+  it('should mount page', async () => {
+    const wrapper = await mountSuspended(App, {
+      route: '/',
+    })
+
+    const title = wrapper.find('h1')
+    expect(title.text()).toBe('Index')
+
+    const link = wrapper.find('a[href="/counter"]')
+    expect(link.exists()).toBe(true)
+  })
+
+  it('should mount component', async () => {
+    const wrapper = await mountSuspended(Counter)
+
+    const title = wrapper.find('h2')
+    expect(title.exists()).toBe(true)
+    expect(title.text()).toBe('Counter Component')
+
+    const input = wrapper.find('input')
+    expect(input.exists()).toBe(true)
+    expect(input.element.value).toBe('0')
+  })
+})

examples/multi-app/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

examples/multi-app/vitest.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from 'vitest/config'
+import { defineVitestProject } from '@nuxt/test-utils/config'
+import { playwright } from '@vitest/browser-playwright'
+
+export default defineConfig({
+  test: {
+    projects: [
+      await defineVitestProject({
+        test: {
+          name: 'nuxt',
+          dir: './test/nuxt',
+        },
+      }),
+      await defineVitestProject({
+        test: {
+          name: 'browser',
+          dir: './test/browser',
+          browser: {
+            enabled: true,
+            provider: playwright(),
+            instances: [{ browser: 'chromium' }],
+            headless: true,
+            screenshotFailures: false,
+          },
+        },
+      }),
+    ],
+    onConsoleLog(log) {
+      if (log.includes('<Suspense> is an experimental feature')) {
+        return false
+      }
+    },
+  },
+})