feat(vue): update generated file setup for apps (#19428)

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

@@ -177,20 +177,7 @@ exports[`application generator should set up project correctly with given option
 "
 `;
 
-exports[`application generator should set up project correctly with given options 5`] = `
-"import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import App from '../App.vue';
-
-describe('App', () => {
-  it('renders properly', () => {
-    const wrapper = mount(App, {});
-    expect(wrapper.text()).toContain('Welcome test 👋');
-  });
-});
-"
-`;
+exports[`application generator should set up project correctly with given options 5`] = `null`;
 
 exports[`application generator should set up project correctly with given options 6`] = `
 [
@@ -212,9 +199,9 @@ exports[`application generator should set up project correctly with given option
   "test/.eslintrc.json",
   "test/index.html",
   "test/project.json",
-  "test/src/__tests__/App.spec.ts",
-  "test/src/App.vue",
-  "test/src/components/NxWelcome.vue",
+  "test/src/app/App.spec.ts",
+  "test/src/app/App.vue",
+  "test/src/app/NxWelcome.vue",
   "test/src/main.ts",
   "test/src/styles.css",
   "test/tsconfig.app.json",

packages/vue/src/generators/application/files/common/src/app/App.spec.ts.template

@@ -2,7 +2,7 @@
 import { describe, it, expect } from 'vitest'
 <% } %>
 import { mount } from '@vue/test-utils'
-import App from '../App.vue';
+import App from './App.vue';
 
 describe('App', () => {
   it('renders properly', () => {

packages/vue/src/generators/application/files/common/src/app/App.vue.template

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 <% if (routing) { %>
 import { RouterLink, RouterView } from 'vue-router';
+<% } else { %>
+import NxWelcome from './NxWelcome.vue';
 <% } %>
-import NxWelcome from './components/NxWelcome.vue';
 </script>
 
 <template>

packages/vue/src/generators/application/files/common/src/main.ts.template

@@ -6,7 +6,7 @@ import router from './router';
 <% } %>
 
 import { createApp } from 'vue';
-import App from './App.vue';
+import App from './app/App.vue';
 
 const app = createApp(App);
 <% if (routing) { %>

packages/vue/src/generators/application/files/routing/src/views/HomeView.vue.template

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NxWelcome from '../components/NxWelcome.vue'
+import NxWelcome from '../app/NxWelcome.vue'
 </script>
 
 <template>

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

@@ -11,22 +11,16 @@ defineProps<{}>();
 </script>
 
 <template>
-  <div>
-    <p>Welcome to Hello!</p>
-  </div>
+  <p>Welcome to Hello!</p>
 </template>
 
-<style scoped>
-div {
-  color: pink;
-}
-</style>
+<style scoped></style>
 "
 `;
 
 exports[`component should generate files with jest 2`] = `
 "import { mount } from '@vue/test-utils';
-import Hello from '../hello.vue';
+import Hello from './hello.vue';
 
 describe('Hello', () => {
   it('renders properly', () => {
@@ -43,16 +37,10 @@ defineProps<{}>();
 </script>
 
 <template>
-  <div>
-    <p>Welcome to Hello!</p>
-  </div>
+  <p>Welcome to Hello!</p>
 </template>
 
-<style scoped>
-div {
-  color: pink;
-}
-</style>
+<style scoped></style>
 "
 `;
 
@@ -60,7 +48,7 @@ exports[`component should generate files with vitest 2`] = `
 "import { describe, it, expect } from 'vitest';
 
 import { mount } from '@vue/test-utils';
-import Hello from '../hello.vue';
+import Hello from './hello.vue';
 
 describe('Hello', () => {
   it('renders properly', () => {

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

@@ -1,4 +1,4 @@
-import { logger, readJson, Tree } from '@nx/devkit';
+import { logger, Tree } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { componentGenerator } from './component';
 import { createLib } from '../../utils/test-utils';
@@ -30,17 +30,14 @@ describe('component', () => {
       appTree.exists('my-lib/src/components/hello/hello.vue')
     ).toBeTruthy();
     expect(
-      appTree.exists('my-lib/src/components/hello/__tests__/hello.spec.ts')
+      appTree.exists('my-lib/src/components/hello/hello.spec.ts')
     ).toBeTruthy();
 
     expect(
       appTree.read('my-lib/src/components/hello/hello.vue', 'utf-8')
     ).toMatchSnapshot();
     expect(
-      appTree.read(
-        'my-lib/src/components/hello/__tests__/hello.spec.ts',
-        'utf-8'
-      )
+      appTree.read('my-lib/src/components/hello/hello.spec.ts', 'utf-8')
     ).toMatchSnapshot();
   });
 
@@ -55,10 +52,7 @@ describe('component', () => {
       appTree.read('my-lib/src/components/hello/hello.vue', 'utf-8')
     ).toMatchSnapshot();
     expect(
-      appTree.read(
-        'my-lib/src/components/hello/__tests__/hello.spec.ts',
-        'utf-8'
-      )
+      appTree.read('my-lib/src/components/hello/hello.spec.ts', 'utf-8')
     ).toMatchSnapshot();
   });
 
@@ -114,7 +108,7 @@ describe('component', () => {
         appTree.exists('my-lib/src/components/hello/Hello.vue')
       ).toBeTruthy();
       expect(
-        appTree.exists('my-lib/src/components/hello/__tests__/Hello.spec.ts')
+        appTree.exists('my-lib/src/components/hello/Hello.spec.ts')
       ).toBeTruthy();
     });
   });
@@ -131,9 +125,7 @@ describe('component', () => {
         appTree.exists('my-lib/src/components/HelloWorld/HelloWorld.vue')
       ).toBeTruthy();
       expect(
-        appTree.exists(
-          'my-lib/src/components/HelloWorld/__tests__/HelloWorld.spec.ts'
-        )
+        appTree.exists('my-lib/src/components/HelloWorld/HelloWorld.spec.ts')
       ).toBeTruthy();
     });
   });

packages/vue/src/generators/component/files/__fileName__.spec.ts__tmpl__

@@ -3,7 +3,7 @@ import { describe, it, expect } from 'vitest'
 <% } %>
 
 import { mount } from '@vue/test-utils'
-import <%= className %> from '../<%= fileName %>.vue';
+import <%= className %> from './<%= fileName %>.vue';
 
 describe('<%= className %>', () => {
   it('renders properly', () => {

packages/vue/src/generators/component/files/__fileName__.vue__tmpl__

@@ -3,13 +3,8 @@ defineProps<{}>()
 </script>
 
 <template>
-  <div>
-    <p>Welcome to <%= className %>!</p>
-  </div>
+  <p>Welcome to <%= className %>!</p>
 </template>
 
 <style scoped>
-div { 
-  color: pink; 
-}
-</style>
+</style>

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

@@ -163,9 +163,7 @@ describe('lib', () => {
     expect(tree.exists('my-lib/package.json')).toBeFalsy();
     expect(tree.exists('my-lib/src/index.ts')).toBeTruthy();
     expect(tree.exists('my-lib/src/components/my-lib.vue')).toBeTruthy();
-    expect(
-      tree.exists('my-lib/src/components/__tests__/my-lib.spec.ts')
-    ).toBeTruthy();
+    expect(tree.exists('my-lib/src/components/my-lib.spec.ts')).toBeTruthy();
     const eslintJson = readJson(tree, 'my-lib/.eslintrc.json');
     expect(eslintJson).toMatchSnapshot();
   });
@@ -206,9 +204,7 @@ describe('lib', () => {
         tree.exists('my-dir/my-lib/src/components/my-dir-my-lib.vue')
       ).toBeTruthy();
       expect(
-        tree.exists(
-          'my-dir/my-lib/src/components/__tests__/my-dir-my-lib.spec.ts'
-        )
+        tree.exists('my-dir/my-lib/src/components/my-dir-my-lib.spec.ts')
       ).toBeTruthy();
     });
 

packages/vue/src/generators/stories/lib/component-story.spec.ts

@@ -44,15 +44,10 @@ describe('vue:component-story', () => {
           </script>
           
           <template>
-            <div>
-              <p>Welcome to Vlv!</p>
-            </div>
+            <p>Welcome to Vlv!</p>
           </template>
           
           <style scoped>
-          div {
-            color: pink;
-          }
           </style>
           `
         );
@@ -88,15 +83,10 @@ describe('vue:component-story', () => {
             </script>
           
           <template>
-            <div>
-              <p>Welcome to Vlv!</p>
-            </div>
+            <p>Welcome to Vlv!</p>
           </template>
           
           <style scoped>
-          div {
-            color: pink;
-          }
           </style>
           `
         );

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

@@ -13,15 +13,10 @@ defineProps<{
 </script>
 
 <template>
-  <div>
-    <p>Welcome to Vlv!</p>
-  </div>
+  <p>Welcome to Vlv!</p>
 </template>
 
 <style scoped>
-div {
-  color: pink;
-}
 </style>
 `;
 
@@ -44,7 +39,7 @@ describe('vue:stories for applications', () => {
     });
 
     expect(
-      appTree.read('test-ui-app/src/components/NxWelcome.stories.ts', 'utf-8')
+      appTree.read('test-ui-app/src/app/NxWelcome.stories.ts', 'utf-8')
     ).toMatchSnapshot();
     expect(
       appTree.read(
@@ -61,7 +56,7 @@ describe('vue:stories for applications', () => {
     });
 
     expect(
-      appTree.read('test-ui-app/src/components/NxWelcome.stories.ts', 'utf-8')
+      appTree.read('test-ui-app/src/app/NxWelcome.stories.ts', 'utf-8')
     ).toMatchSnapshot();
     expect(
       appTree.read(
@@ -73,7 +68,7 @@ describe('vue:stories for applications', () => {
 
   it('should not update existing stories', async () => {
     appTree.write(
-      'test-ui-app/src/components/NxWelcome.stories.ts',
+      'test-ui-app/src/app/NxWelcome.stories.ts',
       `import { ComponentStory, ComponentMeta } from '@storybook/vue3'`
     );
 
@@ -82,7 +77,7 @@ describe('vue:stories for applications', () => {
     });
 
     expect(
-      appTree.read('test-ui-app/src/components/NxWelcome.stories.ts', 'utf-8')
+      appTree.read('test-ui-app/src/app/NxWelcome.stories.ts', 'utf-8')
     ).toMatchSnapshot();
   });
 
@@ -104,7 +99,7 @@ describe('vue:stories for applications', () => {
       });
 
       expect(
-        appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
+        appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
       ).toBeTruthy();
       expect(
         appTree.exists(
@@ -135,7 +130,7 @@ describe('vue:stories for applications', () => {
       });
 
       expect(
-        appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
+        appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
       ).toBeTruthy();
       expect(
         appTree.exists(
@@ -166,7 +161,7 @@ describe('vue:stories for applications', () => {
       });
 
       expect(
-        appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
+        appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
       ).toBeTruthy();
       expect(
         appTree.exists(
@@ -194,7 +189,7 @@ describe('vue:stories for applications', () => {
       });
 
       expect(
-        appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
+        appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
       ).toBeTruthy();
       expect(
         appTree.exists(
@@ -229,7 +224,7 @@ describe('vue:stories for applications', () => {
       });
 
       expect(
-        appTree.exists('test-ui-app/src/components/NxWelcome.stories.ts')
+        appTree.exists('test-ui-app/src/app/NxWelcome.stories.ts')
       ).toBeTruthy();
       expect(
         appTree.exists(

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

@@ -13,15 +13,10 @@ defineProps<{
 </script>
 
 <template>
-  <div>
-    <p>Welcome to Vlv!</p>
-  </div>
+  <p>Welcome to Vlv!</p>
 </template>
 
 <style scoped>
-div {
-  color: pink;
-}
 </style>
 `;
 

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

@@ -12,9 +12,9 @@ import {
   visitNotIgnoredFiles,
 } from '@nx/devkit';
 import { basename, join } from 'path';
-import minimatch = require('minimatch');
 import { nxVersion } from '../../utils/versions';
 import { createComponentStories } from './lib/component-story';
+import minimatch = require('minimatch');
 
 export interface StorybookStoriesSchema {
   project: string;
@@ -36,22 +36,28 @@ export async function createAllStories(
 ) {
   const { sourceRoot, root } = projectConfiguration;
   let componentPaths: string[] = [];
-  const projectPath = joinPathFragments(sourceRoot, 'components');
-  visitNotIgnoredFiles(tree, projectPath, (path) => {
-    // Ignore private files starting with "_".
-    if (basename(path).startsWith('_')) return;
-    if (ignorePaths?.some((pattern) => minimatch(path, pattern))) return;
-    if (path.endsWith('.vue')) {
-      // Let's see if the .stories.* file exists
-      const ext = path.slice(path.lastIndexOf('.'));
-      const storyPathJs = `${path.split(ext)[0]}.stories.js`;
-      const storyPathTs = `${path.split(ext)[0]}.stories.ts`;
+  const pathsToCheck = [
+    joinPathFragments(sourceRoot, 'app'), // Default component folder for apps
+    joinPathFragments(sourceRoot, 'components'), // Additional component folder
+  ];
 
-      if (!tree.exists(storyPathJs) && !tree.exists(storyPathTs)) {
-        componentPaths.push(path);
+  for (const p of pathsToCheck) {
+    visitNotIgnoredFiles(tree, p, (path) => {
+      // Ignore private files starting with "_".
+      if (basename(path).startsWith('_')) return;
+      if (ignorePaths?.some((pattern) => minimatch(path, pattern))) return;
+      if (path.endsWith('.vue')) {
+        // Let's see if the .stories.* file exists
+        const ext = path.slice(path.lastIndexOf('.'));
+        const storyPathJs = `${path.split(ext)[0]}.stories.js`;
+        const storyPathTs = `${path.split(ext)[0]}.stories.ts`;
+
+        if (!tree.exists(storyPathJs) && !tree.exists(storyPathTs)) {
+          componentPaths.push(path);
+        }
       }
-    }
-  });
+    });
+  }
 
   await Promise.all(
     componentPaths.map(async (componentPath) => {

packages/vue/src/generators/storybook-configuration/configuration.spec.ts

@@ -22,15 +22,10 @@ defineProps<{
 </script>
 
 <template>
-  <div>
-    <p>Welcome to Vlv!</p>
-  </div>
+  <p>Welcome to Vlv!</p>
 </template>
 
 <style scoped>
-div {
-  color: pink;
-}
 </style>
 `;