How to extend withNuxt() with another eslint config composer?

[lttr]

There is a short documentation about how to extend Eslint config coming from @nuxt/eslint module here: https://eslint.nuxt.com/packages/module#config-customizations

However it only shows how to inline the customizations in the eslint.config.mjs file in current project.

I would like to have a sharable eslint config for Nuxt projects, that I can reuse. The sharable eslint config would include appending plugins, renaming, overriding some rules etc.

I can do it with a specialized function, but I dont feel like it is the right way.

The function might look like this:

export function wrapNuxtEslintConfig(nuxtConfig) {
  return nuxtConfig
    .override("nuxt/vue/rules", {
      name: "nuxt/vue/rules/custom",
      rules: {
        "vue/block-lang": ["error", { script: { lang: "ts" } }],
        //...
      },
    })
    .append(pluginVueScopedCSS.configs["flat/recommended"])
}

• Do you have an idea how to expose the customizations better?
• Is there a better way how to utilize eslint-flat-config-utils?
• Do you have any example code?

Thank you for any ideas.

[dsvgl]

@lttr I shared how I handle it here: #420
Maybe this helps.

[lttr]

Thanks. That is a great thread. As I can see you are passing an array of company specific configurations into withNuxt function. That looks right.

However I'm not sure if you can override a config from @nuxt/eslint or rename a config. I like the API from eslint-flat-config-utils, which lets you compose the final config in an expressive way.

While I'm thinking about it maybe the main motivation was to have nice looking output in eslint config inspector, which is really great to make sense of the final config. However having the shared configuration in a simple array is also benefitial.

I'm definitely going to try your monorepo setup.

Since there might be another way how to solve this and the packages involved might be evolving more (no version 1 yet), I'm goint to leave this discussion open.