feat(vue): init and lib generators

docs/map.json

@@ -2069,6 +2069,20 @@
             }
           ]
         },
+        {
+          "name": "vue",
+          "id": "vue",
+          "description": "Vue package.",
+          "itemList": [
+            {
+              "id": "overview",
+              "path": "/packages/vue",
+              "name": "Overview of the Nx Vue Plugin",
+              "description": "The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace.",
+              "file": "shared/packages/vue/vue-plugin"
+            }
+          ]
+        },
         {
           "name": "webpack",
           "id": "webpack",

docs/packages.json

@@ -361,6 +361,16 @@
       "generators": ["init", "configuration", "vitest"]
     }
   },
+  {
+    "name": "vue",
+    "packageName": "vue",
+    "description": "The Vue plugin for Nx contains executors and generators for managing Vue applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
+    "path": "generated/packages/vite.json",
+    "schemas": {
+      "executors": [],
+      "generators": ["init", "library", "application", "component"]
+    }
+  },
   {
     "name": "web",
     "packageName": "web",

docs/shared/packages/vue/vue-plugin.md

@@ -0,0 +1,64 @@
+---
+title: Overview of the Nx Vue Plugin
+description: The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace.
+---
+
+{% callout type="caution" title="`@nx/vue` is not available yet" %}
+The `@nx/vue` plugin is not available yet. It will be released soon.
+{% /callout %}
+
+The Nx plugin for [Vue](https://vuejs.org/).
+
+## Setting up a new Nx workspace with Vue
+
+You can create a new workspace that uses Vue with one of the following commands:
+
+- Generate a new monorepo with a Vue app set up with Vue
+
+```shell
+npx create-nx-workspace@latest --preset=vue
+```
+
+## Add Vue to an existing workspace
+
+There is a number of ways to use Vue in your existing workspace.
+
+### Install the `@nx/vue` plugin
+
+{% tabs %}
+{% tab label="npm" %}
+
+```shell
+npm install -D @nx/vue
+```
+
+{% /tab %}
+{% tab label="yarn" %}
+
+```shell
+yarn add -D @nx/vue
+```
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+```shell
+pnpm install -D @nx/vue
+```
+
+{% /tab %}
+{% /tabs %}
+
+### Generate a new project using Vue
+
+To generate a Vue application, run the following:
+
+```bash
+nx g @nx/vue:app my-app
+```
+
+To generate a Vue library, run the following:
+
+```bash
+nx g @nx/vue:lib my-lib
+```

packages/vue/generators.json

@@ -1,5 +1,38 @@
 {
   "name": "Nx Vue",
   "version": "0.1",
-  "generators": {}
+  "schematics": {
+    "init": {
+      "factory": "./src/generators/init/init#vueInitSchematic",
+      "schema": "./src/generators/init/schema.json",
+      "description": "Initialize the `@nrwl/vue` plugin.",
+      "aliases": ["ng-add"],
+      "hidden": true
+    },
+
+    "library": {
+      "factory": "./src/generators/library/library#librarySchematic",
+      "schema": "./src/generators/library/schema.json",
+      "aliases": ["lib"],
+      "x-type": "library",
+      "description": "Create a Vue library."
+    }
+  },
+  "generators": {
+    "init": {
+      "factory": "./src/generators/init/init#vueInitSchematic",
+      "schema": "./src/generators/init/schema.json",
+      "description": "Initialize the `@nrwl/vue` plugin.",
+      "aliases": ["ng-add"],
+      "hidden": true
+    },
+
+    "library": {
+      "factory": "./src/generators/library/library#libraryGeneratorInternal",
+      "schema": "./src/generators/library/schema.json",
+      "aliases": ["lib"],
+      "x-type": "library",
+      "description": "Create a Vue library."
+    }
+  }
 }

packages/vue/index.ts

@@ -0,0 +1,4 @@
+export * from './src/utils/versions';
+export { libraryGenerator } from './src/generators/library/library';
+export { type InitSchema } from './src/generators/init/schema';
+export { vueInitGenerator } from './src/generators/init/init';

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

@@ -0,0 +1,27 @@
+import { readJson, Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { vueInitGenerator } from './init';
+import { InitSchema } from './schema';
+
+// TODO: more or different to be added here
+describe('init', () => {
+  let tree: Tree;
+  let schema: InitSchema = {
+    skipFormat: false,
+  };
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+  });
+
+  it('should add react dependencies', async () => {
+    await vueInitGenerator(tree, schema);
+    const packageJson = readJson(tree, 'package.json');
+    expect(packageJson.dependencies['vue']).toBeDefined();
+  });
+
+  it('should not add jest config if unitTestRunner is none', async () => {
+    await vueInitGenerator(tree, { ...schema, unitTestRunner: 'none' });
+    expect(tree.exists('jest.config.js')).toEqual(false);
+  });
+});

packages/vue/src/generators/init/init.ts

@@ -0,0 +1,70 @@
+import {
+  addDependenciesToPackageJson,
+  convertNxGenerator,
+  GeneratorCallback,
+  readNxJson,
+  removeDependenciesFromPackageJson,
+  runTasksInSerial,
+  Tree,
+  updateNxJson,
+} from '@nx/devkit';
+
+import { initGenerator as jsInitGenerator } from '@nx/js';
+import { nxVersion, vueVersion } from '../../utils/versions';
+import { InitSchema } from './schema';
+
+function setDefault(host: Tree) {
+  const workspace = readNxJson(host);
+
+  workspace.generators = workspace.generators || {};
+  const vueGenerators = workspace.generators['@nx/vue'] || {};
+  const generators = {
+    ...workspace.generators,
+    '@nx/vue': {
+      ...vueGenerators,
+      application: {
+        ...vueGenerators.application,
+        babel: true,
+      },
+    },
+  };
+
+  updateNxJson(host, { ...workspace, generators });
+}
+
+function updateDependencies(host: Tree, _schema: InitSchema) {
+  removeDependenciesFromPackageJson(host, ['@nx/vue'], []);
+
+  const dependencies = {
+    vue: vueVersion,
+  };
+
+  return addDependenciesToPackageJson(host, dependencies, {
+    '@nx/vue': nxVersion,
+  });
+}
+
+export async function vueInitGenerator(host: Tree, schema: InitSchema) {
+  const tasks: GeneratorCallback[] = [];
+
+  const jsInitTask = await jsInitGenerator(host, {
+    ...schema,
+    tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
+    skipFormat: true,
+  });
+
+  tasks.push(jsInitTask);
+
+  setDefault(host);
+
+  if (!schema.skipPackageJson) {
+    const installTask = updateDependencies(host, schema);
+    tasks.push(installTask);
+  }
+
+  return runTasksInSerial(...tasks);
+}
+
+export default vueInitGenerator;
+
+export const vueInitSchematic = convertNxGenerator(vueInitGenerator);

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

@@ -0,0 +1,9 @@
+export interface InitSchema {
+  unitTestRunner?: 'vitest' | 'none'; // TODO: more or different to be added here
+  e2eTestRunner?: 'cypress' | 'playwright' | 'none'; // TODO: more or different to be added here
+  skipFormat?: boolean;
+  skipPackageJson?: boolean;
+  js?: boolean;
+  rootProject?: boolean;
+  // TODO: more or different to be added here
+}

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

@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "NxVueInit",
+  "title": "Init Vue Plugin",
+  "description": "Initialize a Vue Plugin.",
+  "cli": "nx",
+  "type": "object",
+  "properties": {
+    "unitTestRunner": {
+      "description": "Adds the specified unit test runner.",
+      "type": "string",
+      "enum": ["vitest", "none"],
+      "default": "vitest"
+    },
+    "e2eTestRunner": {
+      "description": "Adds the specified E2E test runner.",
+      "type": "string",
+      "enum": ["cypress", "playwright", "none"],
+      "default": "cypress"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false
+    },
+    "skipPackageJson": {
+      "description": "Do not add dependencies to `package.json`.",
+      "type": "boolean",
+      "default": false
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Use JavaScript instead of TypeScript",
+      "default": false
+    },
+    "rootProject": {
+      "description": "Create a project at the root of the workspace",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": []
+}

packages/vue/src/generators/library/files/README.md

@@ -0,0 +1,7 @@
+# <%= name %>
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test <%= name %>` to execute the unit tests via [Vitest](https://vitest.dev/).

packages/vue/src/generators/library/files/package.json__tmpl__

@@ -0,0 +1,12 @@
+{
+  "name": "<%= name %>",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

packages/vue/src/generators/library/files/tsconfig.lib.json__tmpl__

@@ -0,0 +1,23 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "compilerOptions": {
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc",
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["node"]
+  },
+  "exclude": [
+    "src/**/__tests__/*", 
+    "**/*.spec.ts", 
+    "**/*.test.ts", 
+    "**/*.spec.tsx", 
+    "**/*.test.tsx", 
+    "**/*.spec.js", 
+    "**/*.test.js", 
+    "**/*.spec.jsx", 
+    "**/*.test.jsx"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"]
+}

packages/vue/src/generators/library/files/tsconfig.node.json__tmpl__

@@ -0,0 +1,16 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

packages/vue/src/generators/library/files/tsconfig.vitest.json__tmpl__

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}