feat(vue): nuxt executors

package.json

@@ -227,6 +227,7 @@
     "ng-packagr": "~16.2.0",
     "node-fetch": "^2.6.7",
     "npm-package-arg": "11.0.1",
+    "nuxi": "^3.9.1",
     "nx": "17.0.0-rc.2",
     "octokit": "^2.0.14",
     "open": "^8.4.0",

packages/nuxt/.eslintrc.json

@@ -33,7 +33,8 @@
               "nx",
               "typescript",
               "@nx/cypress",
-              "@nx/playwright"
+              "@nx/playwright",
+              "@nx/jest"
             ]
           }
         ]

packages/nuxt/docs/build-examples.md

@@ -0,0 +1,4 @@
+---
+title: Nuxt build executor examples
+description: This page contains examples for the @nx/nuxt:build executor.
+---

packages/nuxt/docs/serve-examples.md

@@ -0,0 +1,4 @@
+---
+title: Nuxt serve executor examples
+description: This page contains examples for the @nx/nuxt:serve executor.
+---

packages/nuxt/executors.json

@@ -1,3 +1,14 @@
 {
-  "executors": {}
+  "executors": {
+    "build": {
+      "implementation": "./src/executors/build/build.impl",
+      "schema": "./src/executors/build/schema.json",
+      "description": "Build with Nuxt."
+    },
+    "serve": {
+      "implementation": "./src/executors/serve/serve.impl",
+      "schema": "./src/executors/serve/schema.json",
+      "description": "Serve with Nuxt."
+    }
+  }
 }

packages/nuxt/package.json

@@ -28,6 +28,7 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
+    "nuxi": "^3.9.1",
     "tslib": "^2.3.0",
     "@nx/devkit": "file:../devkit",
     "@nx/js": "file:../js",

packages/nuxt/src/executors/build/build.impl.ts

@@ -0,0 +1,48 @@
+import { ExecutorContext, joinPathFragments } from '@nx/devkit';
+import { NuxtBuildExecutorOptions } from './schema';
+
+// Required because nuxi is ESM package.
+export function loadNuxiDynamicImport() {
+  return Function('return import("nuxi")')() as Promise<typeof import('nuxi')>;
+}
+
+export async function* nuxtBuildExecutor(
+  options: NuxtBuildExecutorOptions,
+  context: ExecutorContext
+) {
+  const projectRoot =
+    context.projectsConfigurations.projects[context.projectName].root;
+  const { runCommand } = await loadNuxiDynamicImport();
+  try {
+    await runCommand('build', [projectRoot], {
+      overrides: {
+        ...options,
+        workspaceDir: context.root,
+        buildDir: joinPathFragments(context.root, options.outputPath, '.nuxt'),
+        nitro: {
+          output: {
+            dir: joinPathFragments(context.root, options.outputPath, '.output'),
+          },
+        },
+        typescript: {
+          typeCheck: true,
+          tsConfig: {
+            extends: joinPathFragments(
+              context.root,
+              projectRoot,
+              'tsconfig.app.json'
+            ),
+          },
+        },
+        imports: {
+          autoImport: false,
+        },
+      },
+    });
+    return { success: true };
+  } catch (e) {
+    return { success: false, error: e };
+  }
+}
+
+export default nuxtBuildExecutor;

packages/nuxt/src/executors/build/compat.ts

@@ -0,0 +1,4 @@
+import { convertNxExecutor } from '@nx/devkit';
+import nuxtBuildExecutor from './build.impl';
+
+export default convertNxExecutor(nuxtBuildExecutor);

packages/nuxt/src/executors/build/schema.d.ts

@@ -0,0 +1,6 @@
+export interface NuxtBuildExecutorOptions {
+  debug?: boolean;
+  dev?: boolean;
+  ssr?: boolean;
+  outputPath: string;
+}

packages/nuxt/src/executors/build/schema.json

@@ -0,0 +1,37 @@
+{
+  "version": 2,
+  "outputCapture": "direct-nodejs",
+  "title": "Nuxt Prod Builder",
+  "cli": "nx",
+  "description": "Builds a Nuxt application for production.",
+  "type": "object",
+  "presets": [
+    {
+      "name": "Default minimum setup",
+      "keys": []
+    }
+  ],
+  "properties": {
+    "debug": {
+      "type": "boolean",
+      "description": "Set to true to enable debug mode."
+    },
+    "dev": {
+      "type": "boolean",
+      "description": "Whether Nuxt is running in development mode."
+    },
+    "ssr": {
+      "type": "boolean",
+      "description": "Whether to enable rendering of HTML - either dynamically (in server mode) or at generate time. If set to false generated pages will have no content."
+    },
+    "outputPath": {
+      "type": "string",
+      "description": "The output path of the generated files.",
+      "x-completion-type": "directory",
+      "x-priority": "important"
+    }
+  },
+  "definitions": {},
+  "required": [],
+  "examplesFile": "../../../docs/build-examples.md"
+}

packages/nuxt/src/executors/serve/compat.ts

@@ -0,0 +1,4 @@
+import { convertNxExecutor } from '@nx/devkit';
+import nuxtServeExecutor from './serve.impl';
+
+export default convertNxExecutor(nuxtServeExecutor);

packages/nuxt/src/executors/serve/schema.d.ts

@@ -0,0 +1,7 @@
+export interface NuxtServeExecutorOptions {
+  debug?: boolean;
+  dev?: boolean;
+  ssr?: boolean;
+  host?: string;
+  port?: number;
+}

packages/nuxt/src/executors/serve/schema.json

@@ -0,0 +1,41 @@
+{
+  "version": 2,
+  "outputCapture": "direct-nodejs",
+  "title": "Nuxt Server",
+  "cli": "nx",
+  "description": "Serves a Nuxt application for development.",
+  "type": "object",
+  "presets": [
+    {
+      "name": "Default minimum setup",
+      "keys": []
+    }
+  ],
+  "properties": {
+    "debug": {
+      "type": "boolean",
+      "description": "Set to true to enable debug mode."
+    },
+    "dev": {
+      "type": "boolean",
+      "description": "Whether Nuxt is running in development mode."
+    },
+    "ssr": {
+      "type": "boolean",
+      "description": "Whether to enable rendering of HTML - either dynamically (in server mode) or at generate time. If set to false generated pages will have no content."
+    },
+    "port": {
+      "type": "number",
+      "description": "Port to listen on.",
+      "default": 4200
+    },
+    "host": {
+      "type": "string",
+      "description": "Host to listen on.",
+      "default": "localhost"
+    }
+  },
+  "definitions": {},
+  "required": [],
+  "examplesFile": "../../../docs/serve-examples.md"
+}

packages/nuxt/src/executors/serve/serve.impl.ts

@@ -0,0 +1,50 @@
+import { ExecutorContext, joinPathFragments } from '@nx/devkit';
+import { NuxtServeExecutorOptions } from './schema';
+import { createAsyncIterable } from '@nx/devkit/src/utils/async-iterable';
+
+// Required because nuxi is ESM package.
+export function loadNuxiDynamicImport() {
+  return Function('return import("nuxi")')() as Promise<typeof import('nuxi')>;
+}
+
+export async function* nuxtServeExecutor(
+  options: NuxtServeExecutorOptions,
+  context: ExecutorContext
+) {
+  const projectRoot =
+    context.projectsConfigurations.projects[context.projectName].root;
+  yield* createAsyncIterable<{ success: boolean }>(async ({ next, error }) => {
+    try {
+      const { runCommand } = await loadNuxiDynamicImport();
+      await runCommand('dev', [projectRoot], {
+        overrides: {
+          workspaceDir: context.root,
+          devServer: {
+            host: options.host,
+            port: options.port,
+          },
+          typescript: {
+            typeCheck: true,
+            tsConfig: {
+              extends: joinPathFragments(
+                context.root,
+                projectRoot,
+                'tsconfig.app.json'
+              ),
+            },
+          },
+          debug: options.debug,
+          dev: options.dev,
+          ssr: options.ssr,
+        },
+      });
+      next({
+        success: true,
+      });
+    } catch (err) {
+      error(new Error(`Nuxt app exited with message ${err.message}`));
+    }
+  });
+}
+
+export default nuxtServeExecutor;

packages/nuxt/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -49,26 +49,20 @@ exports[`app generated files content - as-provided should configure tsconfig and
   "sourceRoot": "my-app/src",
   "targets": {
     "serve": {
-      "executor": "nx:run-commands",
+      "executor": "@nx/nuxt:serve",
       "outputs": [
         "{workspaceRoot}/{projectRoot}/.output",
         "{workspaceRoot}/{projectRoot}/.nuxt"
       ],
-      "options": {
-        "command": "npx nuxi dev --port=4200",
-        "cwd": "my-app"
-      }
+      "options": {}
     },
     "build": {
-      "executor": "nx:run-commands",
+      "executor": "@nx/nuxt:build",
       "outputs": [
         "{workspaceRoot}/{projectRoot}/.output",
         "{workspaceRoot}/{projectRoot}/.nuxt"
       ],
-      "options": {
-        "command": "npx nuxi build",
-        "cwd": "my-app"
-      }
+      "options": {}
     },
     "lint": {
       "executor": "@nx/eslint:lint",

packages/nuxt/src/generators/application/lib/add-targets.ts

@@ -12,15 +12,12 @@ export function addServeTarget(
 ) {
   const projectConfig = readProjectConfiguration(tree, projectName);
   projectConfig.targets['serve'] = {
-    executor: 'nx:run-commands',
+    executor: '@nx/nuxt:serve',
     outputs: [
       '{workspaceRoot}/{projectRoot}/.output',
       '{workspaceRoot}/{projectRoot}/.nuxt',
     ],
-    options: {
-      command: 'npx nuxi dev --port=4200',
-      cwd: joinPathFragments(projectRoot),
-    },
+    options: {},
   };
   updateProjectConfiguration(tree, projectName, projectConfig);
 }
@@ -32,15 +29,12 @@ export function addBuildTarget(
 ) {
   const projectConfig = readProjectConfiguration(tree, projectName);
   projectConfig.targets['build'] = {
-    executor: 'nx:run-commands',
+    executor: '@nx/nuxt:build',
     outputs: [
       '{workspaceRoot}/{projectRoot}/.output',
       '{workspaceRoot}/{projectRoot}/.nuxt',
     ],
-    options: {
-      command: 'npx nuxi build',
-      cwd: joinPathFragments(projectRoot),
-    },
+    options: {},
   };
   updateProjectConfiguration(tree, projectName, projectConfig);
 }

packages/workspace/src/generators/preset/__snapshots__/preset.spec.ts.snap

@@ -38,11 +38,8 @@ exports[`preset should create files (preset = angular-monorepo) 3`] = `
 
 exports[`preset should create files (preset = nuxt-standalone) 1`] = `
 {
-  "executor": "nx:run-commands",
-  "options": {
-    "command": "npx nuxi dev --port=4200",
-    "cwd": ".",
-  },
+  "executor": "@nx/nuxt:serve",
+  "options": {},
   "outputs": [
     "{workspaceRoot}/{projectRoot}/.output",
     "{workspaceRoot}/{projectRoot}/.nuxt",