rootAttrs.class is rendering class names with spaces, e.g. "i s o l a t e"

[Pwntus]

Environment

• Operating System: Darwin
• Node Version: v20.18.3
• Nuxt Version: 3.16.0
• CLI Version: 3.22.5
• Nitro Version: 2.11.5
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, runtimeConfig, devServer, devtools, ssr, nitro, sourcemap, modules, css, site, app, colorMode, i18n
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @vueuse/[email protected], @nuxt/[email protected], @pinia/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-beta.3

Reproduction

Happens on fresh install.

Description

Fresh install of Nuxt.js, with @nuxt/[email protected]
Looking at the HTML of the generated page I can see that the root element class names are split by whitespaces.

The issue is not happening when using @nuxt/ui v2 - I've narrowed it down to a v3 issue.

Additional context

nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    // rootTag: 'body',
    rootId: 'app',
    rootAttrs: {
      class: 'relative flex h-full'
    }
  }
}

Logs

[abaza738]

Hi, I'm facing the same problem.
I opened an issue for Nuxt before I saw this. It happens even without Nuxt UI.

[abaza738]

Should be fixed according to this!

[Pwntus]

Awesome stuff, thanks for the info @abaza738 !
I'll close this issue.