fix(vue): deprecate options for derived format and fix nuxt generation

packages/nuxt/src/generators/component/component.ts

@@ -1,4 +1,4 @@
-import { formatFiles, runTasksInSerial, Tree } from '@nx/devkit';
+import { formatFiles, Tree } from '@nx/devkit';
 import { componentGenerator as vueComponentGenerator } from '@nx/vue';
 import { Schema } from './schema';
 
@@ -7,17 +7,16 @@ import { Schema } from './schema';
  * are just adjusting some options
  */
 export async function componentGenerator(host: Tree, options: Schema) {
-  const componentGenerator = await vueComponentGenerator(host, {
+  await vueComponentGenerator(host, {
     ...options,
     routing: false,
     skipFormat: true,
+    directory: options.directory ?? 'components',
   });
 
   if (!options.skipFormat) {
     await formatFiles(host);
   }
-
-  return runTasksInSerial(componentGenerator);
 }
 
 export default componentGenerator;

packages/nuxt/src/generators/page/page.spec.ts

@@ -16,12 +16,8 @@ describe('page', () => {
       expect(getDirectory('pages/someDir')).toEqual('pages/someDir');
     });
 
-    it('should append "/pages" to the directory if it does not start with "pages/" 2', () => {
-      expect(getDirectory('someDir/')).toEqual('someDir/pages');
-    });
-
-    it('should append "/pages" to the directory if it does not start with "pages/"', () => {
-      expect(getDirectory('someDir')).toEqual('someDir/pages');
+    it('should prepend "pages/" to the directory if it does not start with "pages/"', () => {
+      expect(getDirectory('someDir')).toEqual('pages/someDir');
     });
 
     it('should work with an empty string', () => {

packages/nuxt/src/generators/page/page.ts

@@ -1,14 +1,9 @@
-import {
-  formatFiles,
-  joinPathFragments,
-  runTasksInSerial,
-  Tree,
-} from '@nx/devkit';
+import { formatFiles, joinPathFragments, Tree } from '@nx/devkit';
 import { componentGenerator } from '../component/component';
 import { Schema } from './schema';
 
 export async function pageGenerator(host: Tree, options: Schema) {
-  const pageGenerator = await componentGenerator(host, {
+  await componentGenerator(host, {
     ...options,
     directory: getDirectory(options.directory),
     skipTests: true,
@@ -21,15 +16,13 @@ export async function pageGenerator(host: Tree, options: Schema) {
   if (!options.skipFormat) {
     await formatFiles(host);
   }
-
-  return runTasksInSerial(pageGenerator);
 }
 
 export function getDirectory(directory: string) {
   return directory?.length > 0
     ? directory.startsWith('pages/')
       ? directory
-      : joinPathFragments(directory + '/pages')
+      : joinPathFragments('pages', directory)
     : 'pages';
 }
 

packages/vue/src/generators/component/component.ts

@@ -1,14 +1,7 @@
-import {
-  formatFiles,
-  generateFiles,
-  GeneratorCallback,
-  runTasksInSerial,
-  toJS,
-  Tree,
-} from '@nx/devkit';
-import { NormalizedSchema, Schema } from './schema';
+import { formatFiles, generateFiles, toJS, Tree } from '@nx/devkit';
 import { join } from 'path';
 import { addExportsToBarrel, normalizeOptions } from './lib/utils';
+import { NormalizedSchema, Schema } from './schema';
 
 export async function componentGenerator(host: Tree, schema: Schema) {
   return componentGeneratorInternal(host, {
@@ -21,16 +14,11 @@ export async function componentGeneratorInternal(host: Tree, schema: Schema) {
   const options = await normalizeOptions(host, schema);
 
   createComponentFiles(host, options);
-
-  const tasks: GeneratorCallback[] = [];
-
   addExportsToBarrel(host, options);
 
   if (!options.skipFormat) {
     await formatFiles(host);
   }
-
-  return runTasksInSerial(...tasks);
 }
 
 function createComponentFiles(host: Tree, options: NormalizedSchema) {

packages/vue/src/generators/component/schema.d.ts

@@ -1,19 +1,32 @@
 export interface Schema {
   name: string;
-  project: string;
   skipTests?: boolean;
   directory?: string;
   export?: boolean;
-  pascalCaseFiles?: boolean;
-  pascalCaseDirectory?: boolean;
   routing?: boolean;
   js?: boolean;
-  flat?: boolean;
   fileName?: string;
   inSourceTests?: boolean;
   skipFormat?: boolean;
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   nameAndDirectoryFormat?: 'as-provided' | 'derived';
+
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v18.
+   */
+  flat?: boolean;
+  /**
+   * @deprecated Provide the desired `directory` option instead and use the `as-provided` format. It will be removed in Nx v18.
+   */
+  pascalCaseDirectory?: boolean;
+  /**
+   * @deprecated Provide the desired `name` option instead and use the `as-provided` format. It will be removed in Nx v18.
+   */
+  pascalCaseFiles?: boolean;
+  /**
+   * @deprecated Provide the `directory` option instead. The project will be determined from the directory provided. It will be removed in Nx v18.
+   */
+  project?: string;
 }
 
 export interface NormalizedSchema extends Schema {

packages/vue/src/generators/component/schema.json

@@ -22,7 +22,8 @@
       "alias": "p",
       "$default": {
         "$source": "projectName"
-      }
+      },
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
     },
     "name": {
       "type": "string",
@@ -52,7 +53,7 @@
     },
     "directory": {
       "type": "string",
-      "description": "Create the component under this directory (can be nested).",
+      "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the workspace root.",
       "alias": "dir",
       "x-priority": "important"
     },
@@ -73,13 +74,15 @@
       "type": "boolean",
       "description": "Use pascal case component file name (e.g. `App.tsx`).",
       "alias": "P",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the desired `name` option instead and use the `as-provided` format. It will be removed in Nx v18."
     },
     "pascalCaseDirectory": {
       "type": "boolean",
       "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
       "alias": "R",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the desired `directory` option instead and use the `as-provided` format. It will be removed in Nx v18."
     },
     "routing": {
       "type": "boolean",

packages/vue/src/generators/library/library.ts

@@ -56,23 +56,20 @@ export async function libraryGenerator(tree: Tree, schema: Schema) {
     tasks.push(await addJest(tree, options));
 
   if (options.component) {
-    tasks.push(
-      await componentGenerator(tree, {
-        name: options.name,
-        project: options.name,
-        flat: true,
-        skipTests:
-          options.unitTestRunner === 'none' ||
-          (options.unitTestRunner === 'vitest' &&
-            options.inSourceTests == true),
-        export: true,
-        routing: options.routing,
-        js: options.js,
-        pascalCaseFiles: options.pascalCaseFiles,
-        inSourceTests: options.inSourceTests,
-        skipFormat: true,
-      })
-    );
+    await componentGenerator(tree, {
+      name: options.name,
+      project: options.name,
+      flat: true,
+      skipTests:
+        options.unitTestRunner === 'none' ||
+        (options.unitTestRunner === 'vitest' && options.inSourceTests == true),
+      export: true,
+      routing: options.routing,
+      js: options.js,
+      pascalCaseFiles: options.pascalCaseFiles,
+      inSourceTests: options.inSourceTests,
+      skipFormat: true,
+    });
   }
 
   if (options.publishable || options.bundler !== 'none') {

packages/vue/src/generators/stories/stories.ts

@@ -38,6 +38,7 @@ export async function createAllStories(
   const pathsToCheck = [
     joinPathFragments(sourceRoot, 'app'), // Default component folder for apps
     joinPathFragments(sourceRoot, 'lib'), // Default component folder for libs
+    joinPathFragments(sourceRoot, 'components'), // Additional component folder used by Nuxt
   ];
 
   for (const p of pathsToCheck) {