@nx/vue 17.0.0-beta.4

package/src/generators/application/files/common/src/main.ts.template

@@ -0,0 +1,15 @@
+<% if (style !== 'none') { %>
+import './styles.<%= style %>';
+<% } %>
+<% if (routing) { %>
+import router from './router';
+<% } %>
+
+import { createApp } from 'vue';
+import App from './app/App.vue';
+
+const app = createApp(App);
+<% if (routing) { %>
+app.use(router);
+<% } %>
+app.mount('#root');

package/src/generators/application/files/common/tsconfig.app.json.template

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc"
+  },
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.vue", "src/**/*.test.vue"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.vue"]
+}

package/src/generators/application/files/routing/src/router/index.ts.template

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue')
+    }
+  ]
+})
+
+export default router

package/src/generators/application/files/routing/src/views/AboutView.vue.template

@@ -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/routing/src/views/HomeView.vue.template

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

package/src/generators/application/files/stylesheet/src/styles.__style__.template

@@ -0,0 +1,42 @@
+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/lib/add-e2e.d.ts

@@ -0,0 +1,3 @@
+import type { GeneratorCallback, Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function addE2e(tree: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

package/src/generators/application/lib/add-e2e.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addE2e = void 0;
+const devkit_1 = require("@nx/devkit");
+const web_1 = require("@nx/web");
+const versions_1 = require("../../../utils/versions");
+async function addE2e(tree, options) {
+    switch (options.e2eTestRunner) {
+        case 'cypress':
+            (0, web_1.webStaticServeGenerator)(tree, {
+                buildTarget: `${options.projectName}:build`,
+                targetName: 'serve-static',
+            });
+            const { cypressProjectGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+            return await cypressProjectGenerator(tree, {
+                ...options,
+                name: options.e2eProjectName,
+                directory: options.e2eProjectRoot,
+                projectNameAndRootFormat: 'as-provided',
+                project: options.projectName,
+                bundler: 'vite',
+                skipFormat: true,
+            });
+        case 'playwright':
+            const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
+            (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+                root: options.e2eProjectRoot,
+                sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+                targets: {},
+                implicitDependencies: [options.projectName],
+            });
+            return configurationGenerator(tree, {
+                project: options.e2eProjectName,
+                skipFormat: true,
+                skipPackageJson: options.skipPackageJson,
+                directory: 'src',
+                js: false,
+                linter: options.linter,
+                setParserOptionsProject: options.setParserOptionsProject,
+                webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
+                webServerAddress: 'http://localhost:4200',
+            });
+        case 'none':
+        default:
+            return () => { };
+    }
+}
+exports.addE2e = addE2e;

package/src/generators/application/lib/add-jest.d.ts

@@ -0,0 +1,5 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+export declare function addJest(tree: Tree, options: {
+    name: string;
+    projectRoot: string;
+}): Promise<GeneratorCallback>;

package/src/generators/application/lib/add-jest.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addJest = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+const setup_jest_1 = require("../../../utils/setup-jest");
+async function addJest(tree, options) {
+    const tasks = [];
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
+    tasks.push(await configurationGenerator(tree, {
+        project: options.name,
+        skipFormat: true,
+        testEnvironment: 'jsdom',
+        compiler: 'babel',
+    }));
+    (0, setup_jest_1.setupJestProject)(tree, options.projectRoot);
+    tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+        '@vue/vue3-jest': versions_1.vueJest3Version,
+    }));
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.addJest = addJest;

package/src/generators/application/lib/add-vite.d.ts

@@ -0,0 +1,3 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function addVite(tree: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

package/src/generators/application/lib/add-vite.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addVite = void 0;
+const devkit_1 = require("@nx/devkit");
+const vite_1 = require("@nx/vite");
+async function addVite(tree, options) {
+    // Set up build target (and test target if using vitest)
+    const viteTask = await (0, vite_1.viteConfigurationGenerator)(tree, {
+        uiFramework: 'none',
+        project: options.name,
+        newProject: true,
+        inSourceTests: options.inSourceTests,
+        includeVitest: options.unitTestRunner === 'vitest',
+        skipFormat: true,
+        testEnvironment: 'jsdom',
+    });
+    (0, vite_1.createOrEditViteConfig)(tree, {
+        project: options.name,
+        includeLib: false,
+        includeVitest: options.unitTestRunner === 'vitest',
+        inSourceTests: options.inSourceTests,
+        imports: [`import vue from '@vitejs/plugin-vue'`],
+        plugins: ['vue()'],
+    }, false);
+    // Update build to skip type checking since tsc won't work on .vue files.
+    // Need to use vue-tsc instead.
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.name);
+    projectConfig.targets.build.options.skipTypeCheck = true;
+    (0, devkit_1.updateProjectConfiguration)(tree, options.name, projectConfig);
+    return viteTask;
+}
+exports.addVite = addVite;

package/src/generators/application/lib/create-application-files.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function createApplicationFiles(tree: Tree, options: NormalizedSchema): void;

package/src/generators/application/lib/create-application-files.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createApplicationFiles = void 0;
+const path = require("path");
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const create_ts_config_1 = require("../../../utils/create-ts-config");
+function createApplicationFiles(tree, options) {
+    (0, devkit_1.generateFiles)(tree, path.join(__dirname, '../files/common'), options.appProjectRoot, {
+        ...options,
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
+        title: options.projectName,
+    });
+    if (options.style !== 'none') {
+        (0, devkit_1.generateFiles)(tree, path.join(__dirname, '../files/stylesheet'), options.appProjectRoot, {
+            ...options,
+            offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
+            title: options.projectName,
+        });
+    }
+    if (options.routing) {
+        (0, devkit_1.generateFiles)(tree, path.join(__dirname, '../files/routing'), options.appProjectRoot, {
+            ...options,
+            offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
+            title: options.projectName,
+        });
+    }
+    (0, create_ts_config_1.createTsConfig)(tree, options.appProjectRoot, 'app', options, (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot));
+}
+exports.createApplicationFiles = createApplicationFiles;

package/src/generators/application/lib/normalize-options.d.ts

@@ -0,0 +1,4 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../schema';
+export declare function normalizeDirectory(options: Schema): string;
+export declare function normalizeOptions(host: Tree, options: Schema, callingGenerator?: string): Promise<NormalizedSchema>;

package/src/generators/application/lib/normalize-options.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = exports.normalizeDirectory = void 0;
+const devkit_1 = require("@nx/devkit");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+function normalizeDirectory(options) {
+    options.directory = options.directory?.replace(/\\{1,2}/g, '/');
+    const { projectDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
+    return projectDirectory
+        ? `${(0, devkit_1.names)(projectDirectory).fileName}/${(0, devkit_1.names)(options.name).fileName}`
+        : (0, devkit_1.names)(options.name).fileName;
+}
+exports.normalizeDirectory = normalizeDirectory;
+async function normalizeOptions(host, options, callingGenerator = '@nx/vue:application') {
+    const { projectName: appProjectName, projectRoot: appProjectRoot, projectNameAndRootFormat, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+        name: options.name,
+        projectType: 'application',
+        directory: options.directory,
+        projectNameAndRootFormat: options.projectNameAndRootFormat,
+        rootProject: options.rootProject,
+        callingGenerator,
+    });
+    options.rootProject = appProjectRoot === '.';
+    options.projectNameAndRootFormat = projectNameAndRootFormat;
+    const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
+    const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+    const parsedTags = options.tags
+        ? options.tags.split(',').map((s) => s.trim())
+        : [];
+    const normalized = {
+        ...options,
+        name: (0, devkit_1.names)(options.name).fileName,
+        projectName: appProjectName,
+        appProjectRoot,
+        e2eProjectName,
+        e2eProjectRoot,
+        parsedTags,
+    };
+    normalized.style = options.style ?? 'css';
+    normalized.routing = normalized.routing ?? false;
+    normalized.unitTestRunner ??= 'vitest';
+    normalized.e2eTestRunner = normalized.e2eTestRunner ?? 'cypress';
+    return normalized;
+}
+exports.normalizeOptions = normalizeOptions;

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

@@ -0,0 +1,30 @@
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import type { Linter } from '@nx/linter';
+
+export interface Schema {
+  name: string;
+  style: 'none' | 'css' | 'scss' | 'less';
+  skipFormat?: boolean;
+  directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  tags?: string;
+  unitTestRunner?: 'jest' | 'vitest' | 'none';
+  inSourceTests?: boolean;
+  e2eTestRunner: 'cypress' | 'playwright' | 'none';
+  linter: Linter;
+  routing?: boolean;
+  js?: boolean;
+  strict?: boolean;
+  setParserOptionsProject?: boolean;
+  skipPackageJson?: boolean;
+  rootProject?: boolean;
+}
+
+export interface NormalizedSchema extends Schema {
+  projectName: string;
+  appProjectRoot: string;
+  e2eProjectName: string;
+  e2eProjectRoot: string;
+  parsedTags: string[];
+  devServerPort?: number;
+}

package/src/generators/application/schema.json

@@ -0,0 +1,140 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxVueApp",
+  "title": "Create a Vue Application",
+  "description": "Create a Vue application for Nx.",
+  "examples": [
+    {
+      "command": "nx g app myapp --directory=myorg/myapp",
+      "description": "Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`"
+    },
+    {
+      "command": "nx g app myapp --routing",
+      "description": "Set up Vue Router"
+    }
+  ],
+  "type": "object",
+  "properties": {
+    "name": {
+      "description": "The name of the application.",
+      "type": "string",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the application?",
+      "pattern": "^[a-zA-Z][^:]*$"
+    },
+    "directory": {
+      "description": "The directory of the new application.",
+      "type": "string",
+      "alias": "dir",
+      "x-priority": "important"
+    },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css",
+      "alias": "s",
+      "x-prompt": {
+        "message": "Which stylesheet format would you like to use?",
+        "type": "list",
+        "items": [
+          {
+            "value": "css",
+            "label": "CSS"
+          },
+          {
+            "value": "scss",
+            "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS              [ http://lesscss.org                       ]"
+          },
+          {
+            "value": "none",
+            "label": "None"
+          }
+        ]
+      }
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint", "none"],
+      "default": "eslint"
+    },
+    "routing": {
+      "type": "boolean",
+      "description": "Generate application with routes.",
+      "x-prompt": "Would you like to add Vue Router to this application?",
+      "default": false
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["jest", "vitest", "none"],
+      "description": "Test runner to use for unit tests.",
+      "x-prompt": "Which unit test runner would you like to use?",
+      "default": "none"
+    },
+    "inSourceTests": {
+      "type": "boolean",
+      "default": false,
+      "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html"
+    },
+    "e2eTestRunner": {
+      "type": "string",
+      "enum": ["cypress", "playwright", "none"],
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "x-prompt": "Which E2E test runner would you like to use?",
+      "default": "cypress"
+    },
+    "tags": {
+      "type": "string",
+      "description": "Add tags to the application (used for linting).",
+      "alias": "t"
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "strict": {
+      "type": "boolean",
+      "description": "Whether to enable tsconfig strict mode or not.",
+      "default": true
+    },
+    "setParserOptionsProject": {
+      "type": "boolean",
+      "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
+      "default": false
+    },
+    "skipPackageJson": {
+      "description": "Do not add dependencies to `package.json`.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "rootProject": {
+      "description": "Create a application at the root of the workspace",
+      "type": "boolean",
+      "default": false,
+      "hidden": true
+    }
+  },
+  "required": ["name"],
+  "examplesFile": "../../../docs/application-examples.md"
+}

package/src/generators/component/component.d.ts

@@ -0,0 +1,4 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Schema } from './schema';
+export declare function componentGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export default componentGenerator;

package/src/generators/component/component.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const utils_1 = require("./lib/utils");
+async function componentGenerator(host, schema) {
+    const workspace = (0, devkit_1.getProjects)(host);
+    const isApp = workspace.get(schema.project).projectType === 'application';
+    const options = await (0, utils_1.normalizeOptions)(host, schema, isApp);
+    createComponentFiles(host, options);
+    const tasks = [];
+    (0, utils_1.addExportsToBarrel)(host, options, isApp);
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.componentGenerator = componentGenerator;
+function createComponentFiles(host, options) {
+    const componentDir = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.directory);
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), componentDir, {
+        ...options,
+        tmpl: '',
+        unitTestRunner: options.unitTestRunner,
+    });
+    for (const c of host.listChanges()) {
+        let deleteFile = false;
+        if ((options.skipTests || options.inSourceTests) &&
+            /.*spec.ts/.test(c.path)) {
+            deleteFile = true;
+        }
+        if (deleteFile) {
+            host.delete(c.path);
+        }
+    }
+    if (options.js)
+        (0, devkit_1.toJS)(host);
+}
+exports.default = componentGenerator;

package/src/generators/component/files/__fileName__.spec.ts__tmpl__

@@ -0,0 +1,13 @@
+<% if ( unitTestRunner === 'vitest' ) { %>
+import { describe, it, expect } from 'vitest'
+<% } %>
+
+import { mount } from '@vue/test-utils'
+import <%= className %> from './<%= fileName %>.vue';
+
+describe('<%= className %>', () => {
+  it('renders properly', () => {
+    const wrapper = mount(<%= className %>, {})
+    expect(wrapper.text()).toContain('Welcome to <%= className %>')
+  })
+});

package/src/generators/component/files/__fileName__.vue__tmpl__

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+defineProps<{}>()
+</script>
+
+<template>
+  <p>Welcome to <%= className %>!</p>
+</template>
+
+<style scoped>
+</style>

package/src/generators/component/lib/utils.d.ts

@@ -0,0 +1,7 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../schema';
+export declare function normalizeOptions(host: Tree, options: Schema, isApp: boolean): Promise<NormalizedSchema>;
+export declare function getComponentClassName(componentName: string, isApp: boolean, projectName: string, directory?: string): string;
+export declare function addExportsToBarrel(host: Tree, options: NormalizedSchema, isApp: boolean): void;
+export declare function getDirectory(options: Schema): Promise<string>;
+export declare function assertValidOptions(options: Schema): void;