fix: Upgrading from 3.1.1 to 3.2.2 breaks unocss styles

[peterbud]

🐛 The bug

After upgrading from version 3.1.1 to 3.2.2 breaks all the unocss styles in the devtools iframe for my nuxt-query module.

Before with v 3.1.1:

After with v 3.2.2:

🛠️ To reproduce

Upgrade from 3.1.1 to 3.2.2

🌈 Expected behavior

Version upgrade should have no adverse effect

ℹ️ Additional context

No response

[stephanelgrg]

I have the same problem when creating a new nuxt-devtools module.

Way to reproduce:

npx nuxi init my-module -t module-devtools
// Add any <NComponent /> to a page
npm run dev
// Style is not applied as expected

ℹ️ I also tried with @nuxt/devtools-ui-kit version 3.2.1 and 3.2.0 and I've the same problem.

Temporary solution:

Use "@nuxt/devtools-ui-kit": "3.1.1"

[peterbud]

I have found the culprit: it has been introduced with #928

Basically the issue is that now you MUST have an unocss entry in your nuxt.config.ts, otherwise the unocss options won't be applied.

This was the line changed:

- if (!options.dev)
+ if (!options.dev && nuxt.options.unocss)
      nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss)

I have added a blank entry to my nuct.config.ts (in the devtool client package):

export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools-ui-kit',
  ],
  ...
  unocss: {},
})

and it works now.

Still I think it should be fixed properly.

[stephanelgrg]

Thank you for the fix Anthony 🙏