Using type aware `typescript-eslint` rules with nuxt eslint module

Oops! Something went wrong! :(

ESLint: 9.11.1

Error: Error while loading rule '@typescript-eslint/no-unnecessary-condition': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://typescript-eslint.io/getting-started/typed-linting for enabling linting with type information.
Parser: (unknown)
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.

import { createConfigForNuxt } from "@nuxt/eslint-config/flat"

export default createConfigForNuxt().append({
  rules: {
    "vue/multi-word-component-names": "off",
    "vue/html-self-closing": "off", // Prettier handles this
    "prefer-template": "error",
    "vue/prefer-template": "error",
    "vue/require-typed-ref": "error", // like noImplicitAny but for refs
    "vue/prefer-true-attribute-shorthand": "error",
    "@typescript-eslint/no-unnecessary-condition": "error",
    "vue/v-bind-style": [
      "error",
      "shorthand",
      {
        sameNameShorthand: "always",
      },
    ],
  },
})

import { createConfigForNuxt } from "@nuxt/eslint-config/flat"

export default createConfigForNuxt()
.prepend({
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
})
  .append({
    // same as before
  })