How to use @unocss/eslint-config in withNuxt()

[chuckntaylor]

Last night I decided to take the plunge and update eslint to utilize the new flat configuration. After a bit of trial and error, it seemed easiest to use the Nuxt eslint module. I am now trying to get the @unocss/eslint-config running again.

In their docs, it says for the flat configuration:

// eslint.config.js
import unocss from '@unocss/eslint-config/flat'

export default [
  unocss,
  // other configs
]

How might I adapt this to the export default withNuxt() inside the generated eslint.config.mjs?

I have tried

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
import unocss from '@unocss/eslint-config/flat'

export default withNuxt(
  // Your custom configs here
  ...unocss
)

But I get the following error:

Type '{ plugins: { unocss: { rules: { order: RuleWithMeta<[], "">; 'order-attributify': RuleWithMeta<[], "">; blocklist: RuleWithMeta<[], "">; 'enforce-class-compile': RuleWithMeta<...>; }; }; }; rules: { ...; }; }' must have a '[Symbol.iterator]()' method that returns an iterator.

[chuckntaylor]

I was able to fix this by installing @antfu/eslint-config and enabling the unocss linting through there.

// @ts-check
import antfu from '@antfu/eslint-config'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  antfu({
    unocss: true,
  })
)
// Your custom configs here

However, I would still be very much interested in knowing how I might have gone about this otherwise.

[YuZih]

Here's my ESLint configuration – hope it helps! @chuckntaylor

import withNuxt from './.nuxt/eslint.config.mjs'
import pluginPrettier from 'eslint-plugin-prettier'
import unocss from '@unocss/eslint-config/flat'

// If there is only one config, you can simply add unocss like this:
export default withNuxt(unocss)

// If there are other configs, add them into withNuxt:
export default withNuxt(
  // Add unocss rules
  unocss,

  // Customize unocss rules if needed
  {
    rules: {
      'unocss/order': 'error',            // Default is 'warn'
      'unocss/order-attributify': 'error' // Default is 'warn'
    },
  },

  // Add other rules: prettier
  {
    plugins: {
      prettier: pluginPrettier,
    },
    rules: {
      'prettier/prettier': [
        'error',
        {
          endOfLine: 'auto',
        },
      ],
    },
  }
)

Here are testing examples:

<!--  ESLint will alert 'noCSS utilities are not orderedeslint[unocss/order]' -->
<div class="m-4 p-2 bg-red-500 text-white rounded" />

<!--  ESLint will alert 'UnoCSS attributes are not orderedeslint[unocss/order-attributify]'-->
<div text-white p-2 m-4 bg-red-500 />

[FireOnIcecube]

You’re really close!
The issue is that withNuxt() expects an array of ESLint flat configs, while @unocss/eslint-config/flat exports a single config object — which is not iterable. So spreading it like ...unocss causes the [Symbol.iterator] error.

Just pass it inside an array instead:

// @ts-check
import withNuxt from "./.nuxt/eslint.config.mjs";
import unocss from "@unocss/eslint-config/flat";

export default withNuxt([
  unocss,
  {
    rules: {
      // Example custom rule
      "vue/html-self-closing": "off",
    },
  },
]);

After wrapping it in an array, UnoCSS ESLint works correctly with Nuxt’s flat config.