feat(nuxt): updates to file sctructure

package.json

@@ -64,6 +64,8 @@
     "@ngrx/router-store": "~16.0.0",
     "@ngrx/store": "~16.0.0",
     "@nguniversal/builders": "~16.2.0",
+    "@nuxt/kit": "^3.7.4",
+    "@nuxt/schema": "^3.7.4",
     "@nx/angular": "16.10.0-beta.1",
     "@nx/cypress": "16.10.0-beta.1",
     "@nx/devkit": "16.10.0-beta.1",
@@ -156,6 +158,7 @@
     "cytoscape-popper": "^2.0.0",
     "cz-git": "^1.4.0",
     "czg": "^1.4.0",
+    "defu": "^6.1.2",
     "detect-port": "^1.5.1",
     "dotenv": "~16.3.1",
     "dotenv-expand": "^10.0.0",

packages/nuxt/plugins/with-nuxt.ts

@@ -1,11 +1,21 @@
 import { join, resolve } from 'path';
 import { workspaceRoot } from '@nx/devkit';
 import { existsSync } from 'fs-extra';
+import { defineNuxtModule } from '@nuxt/kit';
+import { defu } from 'defu';
+import { NuxtModule } from '@nuxt/schema';
+
+export const NxNuxtModule: NuxtModule = defineNuxtModule({
+  meta: { name: '@nx/nuxt/module', configKey: 'nx' },
+  setup(_options, nuxt) {
+    nuxt.options.alias = defu(nuxt.options.alias, nxTsPaths());
+  },
+});
 
 /**
  * read the compilerOptions.paths option from a tsconfig and return as aliases for Nuxt
  **/
-export function nxTsPaths() {
+function nxTsPaths() {
   const tsConfigPath = getTsConfig(join(workspaceRoot, 'tsconfig.base.json'));
   const tsPaths = require(tsConfigPath)?.compilerOptions?.paths as Record<
     string,

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

@@ -10,12 +10,26 @@ exports[`app generated files content - as-provided should add nuxt entries in .g
 .cache"
 `;
 
+exports[`app generated files content - as-provided should configure eslint correctly 1`] = `
+"{
+  "extends": ["@nuxt/eslint-config", "../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
+      "rules": {}
+    }
+  ]
+}
+"
+`;
+
 exports[`app generated files content - as-provided should configure tsconfig and project.json correctly 1`] = `
 "{
   "name": "my-app",
   "$schema": "../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
-  "sourceRoot": "my-app",
+  "sourceRoot": "my-app/src",
   "targets": {
     "serve": {
       "executor": "nx:run-commands",
@@ -86,16 +100,16 @@ exports[`app generated files content - as-provided should create all new files i
   ".prettierignore",
   "my-app/project.json",
   "my-app/.npmrc",
-  "my-app/app.vue",
-  "my-app/assets/css/styles.css",
-  "my-app/components/NxWelcome.vue",
   "my-app/nuxt.config.ts",
-  "my-app/pages/About.vue",
-  "my-app/pages/index.vue",
-  "my-app/public/.gitkeep",
-  "my-app/public/favicon.ico",
-  "my-app/server/api/greet.ts",
-  "my-app/server/tsconfig.json",
+  "my-app/src/app.vue",
+  "my-app/src/assets/css/styles.css",
+  "my-app/src/components/NxWelcome.vue",
+  "my-app/src/pages/about.vue",
+  "my-app/src/pages/index.vue",
+  "my-app/src/public/.gitkeep",
+  "my-app/src/public/favicon.ico",
+  "my-app/src/server/api/greet.ts",
+  "my-app/src/server/tsconfig.json",
   "my-app/tsconfig.json",
   ".gitignore",
   ".eslintrc.json",

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

@@ -23,6 +23,10 @@ describe('app', () => {
       expect(tree.read('.gitignore', 'utf-8')).toMatchSnapshot();
     });
 
+    it('should configure eslint correctly', () => {
+      expect(tree.read('my-app/.eslintrc.json', 'utf-8')).toMatchSnapshot();
+    });
+
     it('should configure tsconfig and project.json correctly', () => {
       expect(tree.read('my-app/project.json', 'utf-8')).toMatchSnapshot();
       expect(tree.read('my-app/tsconfig.json', 'utf-8')).toMatchSnapshot();

packages/nuxt/src/generators/application/application.ts

@@ -37,7 +37,7 @@ export async function applicationGenerator(tree: Tree, schema: Schema) {
   addProjectConfiguration(tree, options.name, {
     root: options.appProjectRoot,
     projectType: 'application',
-    sourceRoot: `${options.appProjectRoot}`,
+    sourceRoot: `${options.appProjectRoot}/src`,
     targets: {},
   });
 

packages/nuxt/src/generators/application/files/nuxt.config.ts__tmpl__

@@ -1,17 +1,9 @@
-import { nxTsPaths } from '@nx/nuxt';
+import { NxNuxtModule } from '@nx/nuxt';
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  /**
-   * Nuxt recommends setting custom alias from a tsconfig here,
-   * instead of in tsconfig since it will override the auto generated tsconfig.
-   * all aliases added here will be added to the auto generated tsconfig.
-   * Other projects generated with Nx will be added to the root level tsconfig.base.json
-   * which might want to be used in this project.
-   *
-   * https://nuxt.com/docs/guide/directory-structure/tsconfig
-   **/
-  alias: nxTsPaths(),
+  modules: [NxNuxtModule],
+  srcDir: 'src',
   devtools: { enabled: true },
   css: ['~/assets/css/styles.css'],
 });

packages/nuxt/src/generators/application/files/app.vue__tmpl__ → packages/nuxt/src/generators/application/files/src/app.vue__tmpl__

@@ -10,7 +10,7 @@ const route = useRoute();
             <NuxtLink to="/about">About</NuxtLink>
         </nav>
     </header>
-    <router-view></router-view>
+    <nuxt-page></nuxt-page>
   </main>
 </template>
 

packages/nuxt/src/generators/application/files/src/pages/index.vue__tmpl__

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

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

@@ -21,7 +21,7 @@ describe('app', () => {
         project: name,
       });
 
-      expect(tree.exists('my-app/components/hello/hello.vue')).toBeTruthy();
+      expect(tree.exists('my-app/src/components/hello/hello.vue')).toBeTruthy();
     });
   });
 });

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

@@ -42,7 +42,7 @@ describe('app', () => {
         project: name,
       });
 
-      expect(tree.exists('my-app/pages/About.vue')).toBeTruthy();
+      expect(tree.exists('my-app/src/pages/about.vue')).toBeTruthy();
     });
 
     it('should create a new page in the correct location for nested directory', async () => {
@@ -51,7 +51,7 @@ describe('app', () => {
         project: name,
       });
 
-      expect(tree.exists('my-app/pages/About.vue')).toBeTruthy();
+      expect(tree.exists('my-app/src/pages/about.vue')).toBeTruthy();
     });
   });
 });

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

@@ -13,8 +13,8 @@ export async function pageGenerator(host: Tree, options: Schema) {
     directory: getDirectory(options.directory),
     skipTests: true,
     flat: true,
-    pascalCaseFiles: options.pascalCaseFiles ?? true,
-    pascalCaseDirectory: options.pascalCaseDirectory ?? true,
+    pascalCaseFiles: false, // it's good to keep route names lowercase
+    pascalCaseDirectory: false,
     skipFormat: true,
   });
 

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

@@ -1,8 +1,6 @@
 export interface Schema {
   project: string;
   name: string;
-  pascalCaseFiles?: boolean;
-  pascalCaseDirectory?: boolean;
   directory?: string;
   fileName?: string;
   skipFormat?: boolean;

packages/nuxt/src/generators/page/schema.json

@@ -37,16 +37,6 @@
       "description": "Create the page under this directory - all nested directories will be created under the pages directory.",
       "alias": "dir"
     },
-    "pascalCaseFiles": {
-      "type": "boolean",
-      "description": "Use pascal case component file name (e.g. `App.vue`).",
-      "alias": "P"
-    },
-    "pascalCaseDirectory": {
-      "type": "boolean",
-      "description": "Use pascal case directory name (e.g. `App/App.vue`).",
-      "alias": "R"
-    },
     "fileName": {
       "type": "string",
       "description": "Create a component with this file name."

packages/nuxt/src/utils/lint.ts

@@ -1,36 +1,18 @@
-import {
-  eslintPluginVueVersion,
-  vueEslintConfigPrettierVersion,
-  vueEslintConfigTypescriptVersion,
-} from '@nx/vue';
-import { nuxtEslintConfigTypescriptVersion } from './versions';
+import { nuxtEslintConfigVersion } from './versions';
 
 export const extraEslintDependencies = {
   dependencies: {},
   devDependencies: {
-    '@nuxtjs/eslint-config-typescript': nuxtEslintConfigTypescriptVersion,
-    'eslint-plugin-vue': eslintPluginVueVersion,
-    '@vue/eslint-config-prettier': vueEslintConfigPrettierVersion,
-    '@vue/eslint-config-typescript': vueEslintConfigTypescriptVersion,
+    '@nuxt/eslint-config': nuxtEslintConfigVersion,
   },
 };
 
 export const extendNuxtEslintJson = (json: any) => {
   const { extends: pluginExtends, ...config } = json;
 
   return {
-    extends: [
-      'eslint:recommended',
-      '@nuxtjs/eslint-config-typescript',
-      'plugin:vue/vue3-essential',
-      '@vue/eslint-config-typescript',
-      '@vue/eslint-config-prettier/skip-formatting',
-      ...(pluginExtends || []),
-    ],
+    extends: ['@nuxt/eslint-config', ...(pluginExtends || [])],
     ignorePatterns: ['.nuxt', 'node_modules', '.output'],
-    rules: {
-      'vue/multi-word-component-names': 'off',
-    },
     ...config,
   };
 };

packages/nuxt/src/utils/versions.ts

@@ -6,4 +6,4 @@ export const nuxtVersion = '^3.7.4';
 export const h3Version = '^1.8.2';
 
 // linting deps
-export const nuxtEslintConfigTypescriptVersion = '12.1.0';
+export const nuxtEslintConfigVersion = '0.2.0';