add tsconfig paths support for importing vue libraries into nuxt apps

libs/nuxt/package.json

@@ -36,6 +36,7 @@
     "@nrwl/cypress": "^10.0.0",
     "@nrwl/jest": "^10.0.0",
     "@nrwl/linter": "^10.0.0",
-    "rxjs": "6.5.5"
+    "rxjs": "6.5.5",
+    "tsconfig-paths-webpack-plugin": "3.2.0"
   }
 }

libs/nuxt/src/builders/browser/builder.ts

@@ -9,6 +9,7 @@ import { from, Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { BrowserBuilderSchema } from './schema';
 import { getProjectRoot } from '../../utils';
+import { modifyTypescriptAliases } from '../../webpack';
 
 export function runBuilder(
   options: BrowserBuilderSchema,
@@ -24,6 +25,20 @@ export function runBuilder(
         buildDir: getSystemPath(
           join(normalize(context.workspaceRoot), options.buildDir)
         ),
+        build: {
+          extend(config, ctx) {
+            modifyTypescriptAliases(config, projectRoot);
+
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const { default: nuxtConfig } = require(getSystemPath(
+              join(projectRoot, 'nuxt.config.js')
+            ));
+
+            if (nuxtConfig.build && nuxtConfig.build.extend) {
+              nuxtConfig.build.extend(config, ctx);
+            }
+          },
+        },
       },
     });
 

libs/nuxt/src/builders/server/builder.ts

@@ -16,6 +16,7 @@ import { map, switchMap } from 'rxjs/operators';
 import { ServerBuilderSchema } from './schema';
 import { BrowserBuilderSchema } from '../browser/schema';
 import { getProjectRoot } from '../../utils';
+import { modifyTypescriptAliases } from '../../webpack';
 
 const serverBuilderOverriddenKeys = [];
 
@@ -48,6 +49,20 @@ export function runBuilder(
         buildDir: getSystemPath(
           join(normalize(context.workspaceRoot), browserOptions.buildDir)
         ),
+        build: {
+          extend(config, ctx) {
+            modifyTypescriptAliases(config, projectRoot);
+
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const { default: nuxtConfig } = require(getSystemPath(
+              join(projectRoot, 'nuxt.config.js')
+            ));
+
+            if (nuxtConfig.build && nuxtConfig.build.extend) {
+              nuxtConfig.build.extend(config, ctx);
+            }
+          },
+        },
       },
     });
 

libs/nuxt/src/webpack.ts

@@ -0,0 +1,24 @@
+import { getSystemPath, join, Path } from '@angular-devkit/core';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function modifyTypescriptAliases(config: any, projectRoot: Path): void {
+  ['~~', '@@', '~', '@', 'assets', 'static'].forEach(
+    (key) => delete config.resolve.alias[key]
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const options: any = {
+    configFile: getSystemPath(join(projectRoot, 'tsconfig.json')),
+    extensions: [...config.resolve.extensions, '.ts', '.tsx'],
+  };
+
+  if (config.resolve.mainFields) {
+    options.mainFields = config.resolve.mainFields;
+  }
+
+  config.resolve.plugins = [
+    ...(config.resolve.plugins || []),
+    new TsconfigPathsPlugin(options),
+  ];
+}