add patch for dep-graph and add library path support

libs/vue-plugin/package.json

@@ -42,6 +42,7 @@
     "sass-loader": "^8.0.2",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
+    "tsconfig-paths-webpack-plugin": "3.2.0",
     "typescript": "~3.8.3"
   }
 }

libs/vue-plugin/src/builders/browser/builder.ts

@@ -19,7 +19,8 @@ import {
   modifyEntryPoint,
   modifyFilenameHashing,
   modifyIndexHtmlPath,
-  modifyTsConfigPaths
+  modifyTsConfigPaths,
+  modifyTypescriptAliases
 } from '../../webpack';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -54,6 +55,7 @@ export function runBuilder(
         modifyCopyAssets(config, options, context, normalizedAssetPatterns);
         addFileReplacements(config, options, context);
         modifyFilenameHashing(config, options);
+        modifyTypescriptAliases(config, options, context);
       },
       // This option is used instead of `dest` because Vue CLI will
       // overwrite our modified `CopyWebpackPlugin` config when `dest`

libs/vue-plugin/src/builders/dev-server/builder.ts

@@ -26,7 +26,8 @@ import {
   modifyEntryPoint,
   modifyFilenameHashing,
   modifyIndexHtmlPath,
-  modifyTsConfigPaths
+  modifyTsConfigPaths,
+  modifyTypescriptAliases
 } from '../../webpack';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -84,6 +85,7 @@ export function runBuilder(
         );
         addFileReplacements(config, browserOptions, context);
         modifyFilenameHashing(config, browserOptions);
+        modifyTypescriptAliases(config, browserOptions, context);
 
         if (!options.watch) {
           // There is no option to disable file watching in `webpack-dev-server`,

libs/vue-plugin/src/schematics/application/schematic.spec.ts

@@ -141,6 +141,16 @@ describe('application schematic', () => {
       `);
   });
 
+  it('should add postinstall script', async () => {
+    const tree = await testRunner
+      .runSchematicAsync('app', options, appTree)
+      .toPromise();
+
+    expect(readJsonInTree(tree, 'package.json').scripts.postinstall).toBe(
+      'node node_modules/@nx-plus/vue-plugin/src/scripts/postinstall.js'
+    );
+  });
+
   describe('--style', () => {
     it('should generate a scss style block', async () => {
       const tree = await testRunner

libs/vue-plugin/src/schematics/application/schematic.ts

@@ -189,6 +189,22 @@ function addCypress(options: NormalizedSchema): Rule {
   ]);
 }
 
+function addPostInstall() {
+  return updateJsonInTree('package.json', (json, context) => {
+    const vuePostInstall =
+      'node node_modules/@nx-plus/vue-plugin/src/scripts/postinstall.js';
+    const { postinstall } = json.scripts || {};
+    if (postinstall) {
+      if (postinstall !== vuePostInstall) {
+        context.logger.warn('Skipped addition of postinstall script.');
+      }
+      return json;
+    }
+    json.scripts = { ...json.scripts, postinstall: vuePostInstall };
+    return json;
+  });
+}
+
 export default function(options: ApplicationSchematicSchema): Rule {
   const normalizedOptions = normalizeOptions(options);
   return chain([
@@ -264,6 +280,7 @@ export default function(options: ApplicationSchematicSchema): Rule {
     options.e2eTestRunner === 'cypress'
       ? addCypress(normalizedOptions)
       : noop(),
+    addPostInstall(),
     addDepsToPackageJson(
       {
         vue: '^2.6.11',

libs/vue-plugin/src/scripts/postinstall.js

@@ -0,0 +1,29 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Patch dep-graph builder function to support Vue files.
+ * @see https://github.com/nrwl/nx/issues/2960
+ */
+function patchNxDepGraph() {
+  const filePath = path.join(
+    process.env.INIT_CWD,
+    'node_modules/@nrwl/workspace/src/core/project-graph/build-dependencies/typescript-import-locator.js'
+  );
+  try {
+    const fileContent = fs.readFileSync(filePath).toString('utf-8');
+    const replacement = "extension !== '.ts' && extension !== '.vue'";
+    if (fileContent.includes(replacement)) {
+      return;
+    }
+    fs.writeFileSync(
+      filePath,
+      fileContent.replace("extension !== '.ts'", replacement)
+    );
+    console.log('Successfully patched Nx dep-graph for Vue support.');
+  } catch (err) {
+    console.error('Failed to patch Nx dep-graph for Vue support.', err);
+  }
+}
+
+patchNxDepGraph();

libs/vue-plugin/src/webpack.ts

@@ -194,3 +194,33 @@ export function modifyFilenameHashing(
     })
   );
 }
+
+export function modifyTypescriptAliases(
+  config,
+  options: BrowserBuilderSchema,
+  context: BuilderContext
+) {
+  const tsConfigPath = getSystemPath(
+    join(normalize(context.workspaceRoot), options.tsConfig)
+  );
+  const extensions = [
+    '.tsx',
+    '.ts',
+    '.mjs',
+    '.js',
+    '.jsx',
+    '.vue',
+    '.json',
+    '.wasm'
+  ];
+  config.resolve.alias.delete('@');
+  config.resolve
+    .plugin('tsconfig-paths')
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    .use(require('tsconfig-paths-webpack-plugin'), [
+      {
+        configFile: tsConfigPath,
+        extensions
+      }
+    ]);
+}

package.json

@@ -62,11 +62,12 @@
     "rxjs": "6.5.4",
     "ts-jest": "25.2.1",
     "ts-node": "~7.0.0",
+    "tsconfig-paths-webpack-plugin": "3.2.0",
     "tslint": "~6.0.0",
     "typescript": "~3.8.3",
     "vue": "^2.6.11",
-    "vuex": "^3.4.0",
     "vue-router": "^3.2.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "vuex": "^3.4.0"
   }
 }