new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

Nuxt · Getting started · all subjects

error-handling & debugging

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Nuxt environment tests use happy-dom or jsdom

When tests run in the Nuxt environment, they run in a happy-dom or jsdom environment. A global Nuxt app is initialized before tests run, including running plugins or code defined in app.vue. Be careful not to mutate global state in tests, or reset it afterwards.

@nuxt/test-utils/runtime and @nuxt/test-utils/e2e conflict

@nuxt/test-utils/runtime and @nuxt/test-utils/e2e need to run in different testing environments and can't be used in the same file. Split tests into separate files using either // @vitest-environment nuxt comment or .nuxt.spec.ts extension for runtime unit tests and .e2e.spec.ts for end-to-end tests.

useNuxtApp throws exception when runtime context unavailable

If runtime context is unavailable in your scope, useNuxtApp will throw an exception when called. Use tryUseNuxtApp instead for composables that do not require nuxtApp, or to check if context is available without an exception.

runWithContext restores Nuxt context in complex async scenarios

The runWithContext method is used to call a function with an explicit Nuxt context. It is meant for complex async/await scenarios in middleware and plugins where the current instance is unset after an async call. Usage: nuxtApp.runWithContext(() => functionWithContext()). This method returns whatever is returned by the function passed to it.

Composition API context limitation with async operations

The Composition API and Nuxt composables are only available during lifecycle and in the same tick before any async operation. After an async operation like await, the context is unset and composables cannot be called. The Vue compiler in <script setup> automatically restores context after async calls, but in middleware and plugins this requires manual context restoration with runWithContext.

runWithContext workaround for try/catch with await

When using try/catch blocks containing await in middleware or plugins, the Nuxt context may be lost. Use runWithContext to restore context: return nuxtApp.runWithContext(() => navigateTo('/auth')). This is a known limitation with the unjs/unctx transformation.

Give your agent this brain