fix(vue): install @typescript-eslint/parser when generating project using it (#31008)

## Current Behavior

Vue and Nuxt projects using ESLint with flat config generate projects
using the `@typescript-eslint/parser` but don't install the package.
This can result in an error if the package has not been installed
before.

## Expected Behavior

Vue and Nuxt project generators should install the
`@typescript-eslint/parser` if they generate ESLint configuration that
uses it.

## Related Issue(s)

Fixes #

packages/nuxt/src/utils/add-linting.ts

@@ -1,6 +1,7 @@
 import { Tree } from 'nx/src/generators/tree';
 import type { Linter as EsLintLinter } from 'eslint';
 import { Linter, LinterType, lintProjectGenerator } from '@nx/eslint';
+import { typescriptESLintVersion } from '@nx/eslint/src/utils/versions';
 import { joinPathFragments } from 'nx/src/utils/path';
 import {
   addDependenciesToPackageJson,
@@ -43,6 +44,10 @@ export async function addLinting(
     });
     tasks.push(lintTask);
 
+    const devDependencies = {
+      '@nuxt/eslint-config': nuxtEslintConfigVersion,
+    };
+
     if (isEslintConfigSupported(host, options.projectRoot)) {
       editEslintConfigFiles(host, options.projectRoot);
 
@@ -65,6 +70,7 @@ export async function addLinting(
             },
           } as unknown // languageOptions is not in eslintrc format but for flat config
         );
+        devDependencies['@typescript-eslint/parser'] = typescriptESLintVersion;
       }
 
       addIgnoresToLintConfig(host, options.projectRoot, [
@@ -74,13 +80,7 @@ export async function addLinting(
       ]);
     }
 
-    const installTask = addDependenciesToPackageJson(
-      host,
-      {},
-      {
-        '@nuxt/eslint-config': nuxtEslintConfigVersion,
-      }
-    );
+    const installTask = addDependenciesToPackageJson(host, {}, devDependencies);
     tasks.push(installTask);
   }
   return runTasksInSerial(...tasks);

packages/vue/src/utils/add-linting.ts

@@ -1,5 +1,6 @@
 import { Tree } from 'nx/src/generators/tree';
 import { Linter, LinterType, lintProjectGenerator } from '@nx/eslint';
+import { typescriptESLintVersion } from '@nx/eslint/src/utils/versions';
 import { joinPathFragments } from 'nx/src/utils/path';
 import {
   addDependenciesToPackageJson,
@@ -67,11 +68,21 @@ export async function addLinting(
 
     editEslintConfigFiles(host, options.projectRoot);
 
+    const devDependencies = {
+      ...extraEslintDependencies.devDependencies,
+    };
+    if (
+      isEslintConfigSupported(host, options.projectRoot) &&
+      useFlatConfig(host)
+    ) {
+      devDependencies['@typescript-eslint/parser'] = typescriptESLintVersion;
+    }
+
     if (!options.skipPackageJson) {
       const installTask = addDependenciesToPackageJson(
         host,
         extraEslintDependencies.dependencies,
-        extraEslintDependencies.devDependencies
+        devDependencies
       );
       tasks.push(installTask);
     }