@nx/nuxt 22.2.0-beta.0 → 22.2.0-beta.2

package/migrations.json

@@ -1,4 +1,36 @@
 {
-  "generators": {},
-  "packageJsonUpdates": {}
+  "generators": {
+    "update-22-2-0-create-ai-instructions-for-nuxt-4": {
+      "version": "22.2.0-beta.0",
+      "description": "Create AI Instructions to help migrate workspaces to Nuxt 4.",
+      "implementation": "./src/migrations/update-22-2-0/create-ai-instructions-for-nuxt-4"
+    }
+  },
+  "packageJsonUpdates": {
+    "22.2.0": {
+      "version": "22.2.0-beta.0",
+      "packages": {
+        "nuxt": {
+          "version": "^4.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@nuxt/eslint-config": {
+          "version": "^1.10.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@nuxt/kit": {
+          "version": "^4.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@nuxt/schema": {
+          "version": "^4.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@nuxt/devtools": {
+          "version": "^3.0.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/nuxt",
-  "version": "22.2.0-beta.0",
+  "version": "22.2.0-beta.2",
   "private": false,
   "description": "The Nuxt plugin for Nx contains executors and generators for managing Nuxt applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -43,19 +43,20 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@nuxt/kit": "^3.10.0",
-    "@nx/devkit": "22.2.0-beta.0",
-    "@nx/js": "22.2.0-beta.0",
-    "@nx/eslint": "22.2.0-beta.0",
-    "@nx/vue": "22.2.0-beta.0",
-    "@nx/vite": "22.2.0-beta.0",
-    "@nx/vitest": "22.2.0-beta.0"
+    "@nuxt/kit": "^3.10.0 || ^4.0.0",
+    "@nx/devkit": "22.2.0-beta.2",
+    "@nx/js": "22.2.0-beta.2",
+    "@nx/eslint": "22.2.0-beta.2",
+    "@nx/vue": "22.2.0-beta.2",
+    "@nx/vite": "22.2.0-beta.2",
+    "@nx/vitest": "22.2.0-beta.2",
+    "semver": "^7.5.3"
   },
   "devDependencies": {
-    "nx": "22.2.0-beta.0"
+    "nx": "22.2.0-beta.2"
   },
   "peerDependencies": {
-    "@nuxt/schema": "^3.10.0"
+    "@nuxt/schema": "^3.10.0 || ^4.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/application/application.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"application.d.ts","sourceRoot":"","sources":["../../../../../../packages/nuxt/src/generators/application/application.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAKjB,IAAI,EAEL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA6BlC,wBAAsB,oBAAoB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAKpE;AAED,wBAAsB,4BAA4B,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAqM5E;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"application.d.ts","sourceRoot":"","sources":["../../../../../../packages/nuxt/src/generators/application/application.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAKjB,IAAI,EAEL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA6BlC,wBAAsB,oBAAoB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAKpE;AAED,wBAAsB,4BAA4B,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAiN5E;AAED,eAAe,oBAAoB,CAAC"}

package/src/generators/application/application.js

@@ -42,7 +42,7 @@ async function applicationGeneratorInternal(tree, schema) {
     const onBoardingStatus = await (0, onboarding_1.createNxCloudOnboardingURLForWelcomeApp)(tree, options.nxCloudToken);
     const connectCloudUrl = onBoardingStatus === 'unclaimed' &&
         (await (0, onboarding_1.getNxCloudAppOnBoardingUrl)(options.nxCloudToken));
-    tasks.push((0, ensure_dependencies_1.ensureDependencies)(tree, options));
+    tasks.push(await (0, ensure_dependencies_1.ensureDependencies)(tree, options));
     const packageJson = {
         name: options.importPath,
         version: '0.0.1',
@@ -58,10 +58,11 @@ async function applicationGeneratorInternal(tree, schema) {
         }
     }
     else {
+        const sourceDir = options.useAppDir ? 'app' : 'src';
         (0, devkit_1.addProjectConfiguration)(tree, options.projectName, {
             root: options.appProjectRoot,
             projectType: 'application',
-            sourceRoot: `${options.appProjectRoot}/src`,
+            sourceRoot: `${options.appProjectRoot}/${sourceDir}`,
             tags: options.parsedTags?.length ? options.parsedTags : undefined,
             targets: {},
         });
@@ -69,7 +70,10 @@ async function applicationGeneratorInternal(tree, schema) {
     if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
         (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), packageJson);
     }
-    (0, devkit_1.generateFiles)(tree, (0, node_path_1.join)(__dirname, './files/base'), options.appProjectRoot, {
+    // Select template directory based on useAppDir
+    const templateDir = options.useAppDir ? 'app-dir' : 'base';
+    const nxWelcomeDir = options.useAppDir ? 'nx-welcome-app-dir' : 'nx-welcome';
+    (0, devkit_1.generateFiles)(tree, (0, node_path_1.join)(__dirname, './files', templateDir), options.appProjectRoot, {
         ...options,
         offsetFromRoot: projectOffsetFromRoot,
         relativePathToRootTsConfig: (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot),
@@ -80,7 +84,7 @@ async function applicationGeneratorInternal(tree, schema) {
         projectRoot: options.appProjectRoot,
         hasVitest: options.unitTestRunner === 'vitest',
     });
-    (0, devkit_1.generateFiles)(tree, (0, node_path_1.join)(__dirname, './files/nx-welcome', onBoardingStatus), options.appProjectRoot, {
+    (0, devkit_1.generateFiles)(tree, (0, node_path_1.join)(__dirname, './files', nxWelcomeDir, onBoardingStatus), options.appProjectRoot, {
         ...options,
         connectCloudUrl,
         offsetFromRoot: projectOffsetFromRoot,
@@ -92,13 +96,17 @@ async function applicationGeneratorInternal(tree, schema) {
         hasVitest: options.unitTestRunner === 'vitest',
     });
     if (options.style === 'none') {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/assets/css/styles.none`));
+        const stylesPath = options.useAppDir
+            ? `app/assets/css/styles.none`
+            : `src/assets/css/styles.none`;
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, stylesPath));
     }
     (0, create_ts_config_1.createTsConfig)(tree, {
         projectRoot: options.appProjectRoot,
         rootProject: options.rootProject,
         unitTestRunner: options.unitTestRunner,
         isUsingTsSolutionConfig: options.isUsingTsSolutionConfig,
+        useAppDir: options.useAppDir,
     }, (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot));
     (0, update_gitignore_1.updateGitIgnore)(tree);
     // If we are using the new TS solution

package/src/generators/application/files/app-dir/__dot__npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

package/src/generators/application/files/app-dir/app/app.vue__tmpl__

@@ -0,0 +1,48 @@
+<script setup lang="ts"></script>
+
+<template>
+  <main>
+    <header>
+      <nav>
+        <NuxtLink to="/">
+          Home
+        </NuxtLink>
+        <NuxtLink to="/about">
+          About
+        </NuxtLink>
+      </nav>
+    </header>
+    <nuxt-page />
+  </main>
+</template>
+
+<style scoped lang="css">
+header {
+    line-height: 1.5;
+    max-width: 100vw;
+}
+
+nav>a {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+@media (min-width: 768px) {
+    header {
+        display: flex;
+        place-items: center;
+        padding-right: calc(var(--section-gap) / 2);
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 768px;
+    }
+
+    nav {
+        text-align: left;
+        font-size: 1rem;
+
+        padding: 1rem 0;
+        margin-top: 1rem;
+    }
+}
+</style>

package/src/generators/application/files/app-dir/app/assets/css/styles.__style__

@@ -0,0 +1,41 @@
+html {
+  -webkit-text-size-adjust: 100%;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  line-height: 1.5;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+body {
+  font-family: inherit;
+  line-height: inherit;
+  margin: 0;
+}
+h1,
+h2,
+p,
+pre {
+  margin: 0;
+}
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+h1,
+h2 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+}

package/src/generators/application/files/app-dir/app/pages/about.vue__tmpl__

@@ -0,0 +1,16 @@
+<template>
+    <div class="about">
+        <h1>This is an about page.</h1>
+    </div>
+</template>
+
+<style>
+@media (min-width: 768px) {
+    .about {
+        max-width: 768px;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 0 1rem;
+    }
+}
+</style>

package/src/generators/application/files/app-dir/app/pages/index.vue__tmpl__

@@ -0,0 +1,3 @@
+<template>
+  <NxWelcome title="<%= title %>" />
+</template>

package/src/generators/application/files/app-dir/nuxt.config.ts__tmpl__

@@ -0,0 +1,29 @@
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { defineNuxtConfig } from 'nuxt/config';
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  workspaceDir: '<%= offsetFromRoot %>',
+  devtools: { enabled: true },
+  devServer: {
+    host: 'localhost',
+    port: 4200,
+  },
+  typescript: {
+    typeCheck: true,
+    tsConfig: {
+      extends: '../<%= relativePathToRootTsConfig %>', // Nuxt copies this string as-is to the `./.nuxt/tsconfig.json`, therefore it needs to be relative to that directory
+    },
+  },
+  imports: {
+    autoImport: true,
+  },
+  <%_ if (style !== 'none') { _%>
+  css: ['~/assets/css/styles.<%= style %>'],
+  <%_ } _%>
+  vite: {
+    plugins: [
+      nxViteTsPaths()
+    ],
+  },
+});

package/src/generators/application/files/app-dir/server/api/greet.ts__tmpl__

@@ -0,0 +1,10 @@
+import { defineEventHandler, getQuery } from 'h3';
+
+export default defineEventHandler((event) => {
+  const q = getQuery(event);
+  const projectName = q.name || 'World';
+
+  return {
+    message: `Hello ${projectName}`,
+  };
+});

package/src/generators/application/files/app-dir/server/tsconfig.json__tmpl__

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}