feat(vue): support generating components using the path as provided

packages/devkit/src/generators/artifact-name-and-directory-utils.ts

@@ -23,7 +23,7 @@ export type ArtifactGenerationOptions = {
   name: string;
   directory?: string;
   disallowPathInNameForDerived?: boolean;
-  fileExtension?: 'js' | 'jsx' | 'ts' | 'tsx';
+  fileExtension?: 'js' | 'jsx' | 'ts' | 'tsx' | 'vue';
   fileName?: string;
   flat?: boolean;
   nameAndDirectoryFormat?: NameAndDirectoryFormat;

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/generators.json

@@ -23,7 +23,7 @@
       "description": "Create a Vue library."
     },
     "component": {
-      "factory": "./src/generators/component/component",
+      "factory": "./src/generators/component/component#componentGeneratorInternal",
       "schema": "./src/generators/component/schema.json",
       "aliases": ["c"],
       "x-type": "component",

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

@@ -29,12 +29,34 @@ describe('component', () => {
       unitTestRunner: 'vitest',
     });
 
-    expect(
-      appTree.read(`${libName}/src/components/hello/hello.vue`, 'utf-8')
-    ).toMatchSnapshot();
-    expect(
-      appTree.read(`${libName}/src/components/hello/hello.spec.ts`, 'utf-8')
-    ).toMatchSnapshot();
+    expect(appTree.read(`${libName}/src/lib/hello/hello.vue`, 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "<script setup lang="ts">
+      defineProps<{}>();
+      </script>
+
+      <template>
+        <p>Welcome to Hello!</p>
+      </template>
+
+      <style scoped></style>
+      "
+    `);
+    expect(appTree.read(`${libName}/src/lib/hello/hello.spec.ts`, 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "import { describe, it, expect } from 'vitest';
+
+      import { mount } from '@vue/test-utils';
+      import Hello from './hello.vue';
+
+      describe('Hello', () => {
+        it('renders properly', () => {
+          const wrapper = mount(Hello, {});
+          expect(wrapper.text()).toContain('Welcome to Hello');
+        });
+      });
+      "
+    `);
   });
 
   it('should generate files with jest', async () => {
@@ -44,12 +66,32 @@ describe('component', () => {
       unitTestRunner: 'jest',
     });
 
-    expect(
-      appTree.read(`${libName}/src/components/hello/hello.vue`, 'utf-8')
-    ).toMatchSnapshot();
-    expect(
-      appTree.read(`${libName}/src/components/hello/hello.spec.ts`, 'utf-8')
-    ).toMatchSnapshot();
+    expect(appTree.read(`${libName}/src/lib/hello/hello.vue`, 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "<script setup lang="ts">
+      defineProps<{}>();
+      </script>
+
+      <template>
+        <p>Welcome to Hello!</p>
+      </template>
+
+      <style scoped></style>
+      "
+    `);
+    expect(appTree.read(`${libName}/src/lib/hello/hello.spec.ts`, 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "import { mount } from '@vue/test-utils';
+      import Hello from './hello.vue';
+
+      describe('Hello', () => {
+        it('renders properly', () => {
+          const wrapper = mount(Hello, {});
+          expect(wrapper.text()).toContain('Welcome to Hello');
+        });
+      });
+      "
+    `);
   });
 
   it('should have correct component name based on directory', async () => {
@@ -61,7 +103,10 @@ describe('component', () => {
     });
 
     expect(
-      appTree.read(`${libName}/src/foo/bar/hello-world.vue`, 'utf-8')
+      appTree.read(
+        `${libName}/src/foo/bar/hello-world/hello-world.vue`,
+        'utf-8'
+      )
     ).toContain('HelloWorld');
   });
 
@@ -74,7 +119,10 @@ describe('component', () => {
     });
 
     expect(
-      appTree.read(`${libName}/src/foo/bar-baz/hello-world.vue`, 'utf-8')
+      appTree.read(
+        `${libName}/src/foo/bar-baz/hello-world/hello-world.vue`,
+        'utf-8'
+      )
     ).toContain('HelloWorld');
   });
 
@@ -86,10 +134,10 @@ describe('component', () => {
     });
 
     expect(
-      appTree.read(`${appName}/src/components/hello/hello.vue`, 'utf-8')
+      appTree.read(`${appName}/src/app/hello/hello.vue`, 'utf-8')
     ).toContain('Hello');
     expect(
-      appTree.exists(`${appName}/src/components/hello/hello.spec.ts`)
+      appTree.exists(`${appName}/src/app/hello/hello.spec.ts`)
     ).toBeTruthy();
   });
 
@@ -100,9 +148,11 @@ describe('component', () => {
         project: libName,
         export: true,
       });
-      expect(
-        appTree.read(`${libName}/src/index.ts`, 'utf-8')
-      ).toMatchSnapshot();
+      expect(appTree.read(`${libName}/src/index.ts`, 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "export { default as Hello } from './lib/hello/hello.vue';
+        "
+      `);
     });
 
     it('should not export from an app', async () => {
@@ -112,9 +162,7 @@ describe('component', () => {
         export: true,
       });
 
-      expect(
-        appTree.read(`${appName}/src/index.ts`, 'utf-8')
-      ).toMatchSnapshot();
+      expect(appTree.exists(`${appName}/src/index.ts`)).toBe(false);
     });
   });
 
@@ -127,10 +175,10 @@ describe('component', () => {
         directory: 'foo/bar',
       });
       expect(
-        appTree.read(`${libName}/src/foo/bar/Hello.vue`, 'utf-8')
+        appTree.read(`${libName}/src/foo/bar/hello/Hello.vue`, 'utf-8')
       ).toContain('Hello');
       expect(
-        appTree.exists(`${libName}/src/foo/bar/Hello.spec.ts`)
+        appTree.exists(`${libName}/src/foo/bar/hello/Hello.spec.ts`)
       ).toBeTruthy();
     });
   });
@@ -144,12 +192,10 @@ describe('component', () => {
         pascalCaseDirectory: true,
       });
       expect(
-        appTree.exists(`${libName}/src/components/HelloWorld/HelloWorld.vue`)
+        appTree.exists(`${libName}/src/lib/HelloWorld/HelloWorld.vue`)
       ).toBeTruthy();
       expect(
-        appTree.exists(
-          `${libName}/src/components/HelloWorld/HelloWorld.spec.ts`
-        )
+        appTree.exists(`${libName}/src/lib/HelloWorld/HelloWorld.spec.ts`)
       ).toBeTruthy();
     });
   });
@@ -162,7 +208,7 @@ describe('component', () => {
         flat: true,
       });
 
-      expect(appTree.exists(`${libName}/src/components/hello.vue`));
+      expect(appTree.exists(`${libName}/src/lib/hello.vue`));
     });
     it('should work with custom directory path', async () => {
       await componentGenerator(appTree, {

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

@@ -1,39 +1,28 @@
-import {
-  formatFiles,
-  generateFiles,
-  GeneratorCallback,
-  joinPathFragments,
-  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, {
+    nameAndDirectoryFormat: 'derived',
+    ...schema,
+  });
+}
+
+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) {
-  const componentDir = joinPathFragments(
-    options.projectSourceRoot,
-    options.directory
-  );
-
-  generateFiles(host, join(__dirname, './files'), componentDir, {
+  generateFiles(host, join(__dirname, './files'), options.directory, {
     ...options,
     tmpl: '',
     unitTestRunner: options.unitTestRunner,