Error on Nuxt v4.1.X with NuxtUI v4.0.0-alpha.X

[jcjp]

Environment

- Operating System: Linux
- Node Version:     v22.17.1
- Nuxt Version:     4.1.2
- CLI Version:      3.28.0
- Nitro Version:    2.12.6
- Package Manager:  pnpm@10.17.0
- Builder:          -
- User Config:      modules, devtools, css, compatibilityDate, hub, nitro, vite, eslint
- Runtime Modules:  @nuxt/ui@4.0.0-alpha.2, @nuxt/eslint@1.9.0, @nuxthub/core@0.9.0, nuxt-auth-utils@0.5.25, @pinia/nuxt@0.11.2, @pinia/colada-nuxt@0.2.2
- Build Modules:    -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.0.0-alpha.x

Version

v4.0.0-alpha.2

Reproduction

1. Create a Nuxt application via CLI
2. Used PNPM as package manager
3. Did not install any libraries
4. Go to the project directory install NuxtUI v4 alpha.2
5. Install necessary libraries needed for it to run like @nuxt/icon, @nuxt/fons, @nuxt/color-mode
6. Add all of them on nuxt.config.ts under modules
7. Change app.vue to this code:

<template>
  <UApp>
    <UButton />
  </UApp>
</template>

8. Run dev and open the localhost:3000 see the error displayed

Description

On Nuxt v4.1.X it seems that there is an error with NuxtUI v4.0.0-alpha.2 when I tried running the development environment it shows this error:

500
'set' on proxy: trap returned falsish for property 'style'
at _createVNode (/node_modules/.pnpm/@vue+runtime-core@3.5.21/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7555:19)
at createVNodeWithArgsTransform (/node_modules/.pnpm/@vue+runtime-core@3.5.21/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7445:10)
at doCreateVNode (/node_modules/.pnpm/@vue+runtime-core@3.5.21/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:8193:14)
at h (/node_modules/.pnpm/@vue+runtime-core@3.5.21/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:8214:12)
at h.default (/node_modules/.pnpm/reka-ui@2.5.0_typescript@5.9.2_vue@3.5.21_typescript@5.9.2_/node_modules/reka-ui/dist/Primitive/Primitive.js:26:42)
at renderComponentRoot (/node_modules/.pnpm/@vue+runtime-core@3.5.18/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6506:16)
at renderComponentSubTree (/node_modules/.pnpm/@vue+server-renderer@3.5.18_vue@3.5.18_typescript@5.9.2_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:754:28)
at renderComponentVNode (/node_modules/.pnpm/@vue+server-renderer@3.5.18_vue@3.5.18_typescript@5.9.2_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:686:12)
at renderVNode /node_modules/.pnpm/@vue+server-renderer@3.5.18_vue@3.5.18_typescript@5.9.2_/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:801:14)
at _sfc_ssrRender (/node_modules/.pnpm/@nuxt+ui@4.0.0-alpha.2_@babel+parser@7.28.4_@netlify+blobs@9.1.2_change-case@5.4.4_db0@_0de5cdf6cc29204f64b5ba16fa254ff1/node_modules/@nuxt/ui/dist/runtime/components/Avatar.js:81:43)

Additional context

No response

Logs

WARN  [Vue warn]: setupContext.attrs is readonly. at <Primitive>                                                                  10:25:33 PM
at <UAvatar>
at <Primitive>
at <ULinkBase>
at <NuxtLink>
at <ULink>
at <UButton>
at <PrimitiveSlot>
at <Primitive>
at <PrimitiveSlot>
at <Primitive>
at <PopperAnchor>
at <MenuAnchor>
at <DropdownMenuTrigger>
at <PopperRoot>
at <MenuRoot>
at <DropdownMenuRoot>
at <UDropdownMenu>
at <TeamsMenu>
at <UDashboardSidebar>
at <Primitive>
at <UDashboardGroup>
at <ToastProvider>
at <Toaster>
at <TooltipProvider>
at <ConfigProvider>
at <App>
at <User>
at <AsyncComponentWrapper>
at <LayoutLoader>
at <NuxtLayoutProvider>
at <NuxtLayout>
at <Primitive>
at <UContainer>
at <ToastProvider>
at <Toaster>
at <TooltipProvider>
at <ConfigProvider>
at <App>
at <App>
at <NuxtRoot>

[HugoRCD]

@jcjp You don't need to install the modules you mentioned because they are already automatically installed and configured by @nuxt/ui, then did you create the .npmrc file and add your main.css file to import tailwind and styles from @nuxt/ui?

More simply, I recommend that you go straight to installation via the ui template:
https://ui4.nuxt.com/docs/getting-started/installation/nuxt#use-a-nuxt-template

[jcjp]

@jcjp You don't need to install the modules you mentioned because they are already automatically installed and configured by @nuxt/ui, then did you create the .npmrc file and add your main.css file to import tailwind and styles from @nuxt/ui?

More simply, I recommend that you go straight to installation via the ui template:
https://ui4.nuxt.com/docs/getting-started/installation/nuxt#use-a-nuxt-template

Ah yes on my actual project I have those setup and followed the steps, not sure why when I run the pnpm dev it's not finding those modules that are automatically installed. Will update the reproduction and retry thanks. EDIT: Okay it worked following the documentation, I'll and investigate this further must have something to do with the modules on my actual project. I also got it fixed from my actual project.