Safari: useHead() was called without provide context

[tnld]

Environment

• Operating System: Darwin
• Node Version: v24.5.0
• Nuxt Version: 4.1.3
• CLI Version: 3.29.3
• Nitro Version: 2.12.7
• Package Manager: bun@1.3.0
• Builder: -
• User Config: compatibilityDate, devtools, future, app, modules, $production, css, runtimeConfig, site, socialShare, ogImage, vite, scripts, typescript, pinia, i18n, icon, nitro, devServer, sentry, sourcemap
• Runtime Modules: @nuxt/ui@4.0.1, nuxt-auth-utils@0.5.25, @nuxt/image@1.11.0, @vueuse/nuxt@13.9.0, @nuxtjs/i18n@10.1.1, @pinia/nuxt@0.11.2, nuxt-authorization@0.3.5, @nuxt/scripts@0.12.2, nuxt-vitalizer@2.0.0, @stefanobartoletti/nuxt-social-share@2.0.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.0.1

Reproduction

I wasn't able to reproduce this error in a new repo yet. It also doesn't always seem to occur right away, but only after Safari has been open for some time.

I will add a reproduction if I find a way to always reproduce the error.

Description

When running our Nuxt 4 project locally with Nuxt UI 4.0.1, Safari (latest version on macOS and iOS) fails during page rendering with:

useHead() was called without provide context, ensure you call it through the setup() function.

The stack trace always points to Nuxt UI’s runtime/plugins/colors.js, specifically the useHead(headData) call. Chrome and Firefox work fine; only Safari exhibits the crash. The app shows a brief flash of the content and then a blank screen (or the error page if using the default Nuxt one without any UI components).

Additional context

Workaround/Notes
We temporarily worked around it by:

• Delaying the useHead call until app:created.
• Registering nuxt-ui-colors output via a custom plugin that runs after Nuxt’s head provider is definitely available.

Those hacks seem to fix it, but they suggest the built-in plugin sometimes runs before the head injection is established (Safari timing quirk).

Any guidance or patch to ensure the colors plugin waits for the head context would be much appreciated.

ui-head-delay.ts

Logs

useHead() was called without provide context, ensure you call it through the setup() function.

useHead@https://server.local:3000/_nuxt/@fs/Users/tnld/dev/project/node_modules/@unhead/vue/dist/shared/vue.Bm-NbY4b.mjs:31:58
@https://server.local:3000/_nuxt/@fs/Users/tnld/dev/project/node_modules/@nuxt/ui/dist/runtime/plugins/colors.js:53:10
runWithContext@https://server.local:3000/_nuxt/@fs/Users/tnld/dev/project/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4082:20
run@https://server.local:3000/_nuxt/@fs/Users/tnld/dev/project/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:67:18
@https://server.local:3000/_nuxt/@fs/Users/tnld/dev/project/node_modules/nuxt/dist/app/nuxt.js:138:53
applyPlugin@https://server.local:3000/_nuxt/@fs/Users/tnld/dev/project/node_modules/nuxt/dist/app/nuxt.js:136:35
@https://server.local:3000/_nuxt/@fs/Users/tnld/dev/project/node_modules/nuxt/dist/app/nuxt.js:157:34
executePlugin@https://server.local:3000/_nuxt/@fs/Users/tnld/dev/project/node_modules/nuxt/dist/app/nuxt.js:152:34
@https://server.local:3000/_nuxt/@fs/Users/tnld/dev/project/node_modules/nuxt/dist/app/nuxt.js:193:24