feat(vue): init and lib generators

docs/generated/packages/vite/generators/configuration.json

@@ -28,7 +28,7 @@
       "uiFramework": {
         "type": "string",
         "description": "UI Framework to use for Vite.",
-        "enum": ["react", "none"],
+        "enum": ["react", "vue", "none"],
         "default": "none",
         "x-prompt": "What UI framework plugin should Vite use?"
       },

docs/generated/packages/vite/generators/init.json

@@ -11,7 +11,7 @@
       "uiFramework": {
         "type": "string",
         "description": "UI Framework to use for Vite.",
-        "enum": ["react", "none"],
+        "enum": ["react", "vue", "none"],
         "default": "react",
         "x-prompt": "What UI framework plugin should Vite use?"
       },

docs/generated/packages/vite/generators/vitest.json

@@ -16,7 +16,7 @@
       },
       "uiFramework": {
         "type": "string",
-        "enum": ["react", "none"],
+        "enum": ["react", "vue", "none"],
         "default": "none",
         "description": "UI framework to use with vitest."
       },

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/vite/src/generators/configuration/schema.d.ts

@@ -1,5 +1,5 @@
 export interface ViteConfigurationGeneratorSchema {
-  uiFramework: 'react' | 'none';
+  uiFramework: 'react' | 'vue' | 'none';
   compiler?: 'babel' | 'swc';
   project: string;
   newProject?: boolean;

packages/vite/src/generators/configuration/schema.json

@@ -28,7 +28,7 @@
     "uiFramework": {
       "type": "string",
       "description": "UI Framework to use for Vite.",
-      "enum": ["react", "none"],
+      "enum": ["react", "vue", "none"],
       "default": "none",
       "x-prompt": "What UI framework plugin should Vite use?"
     },

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

@@ -1,5 +1,5 @@
 export interface InitGeneratorSchema {
-  uiFramework: 'react' | 'none';
+  uiFramework: 'react' | 'vue' | 'none';
   compiler?: 'babel' | 'swc';
   includeLib?: boolean;
   testEnvironment?: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string;

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

@@ -8,7 +8,7 @@
     "uiFramework": {
       "type": "string",
       "description": "UI Framework to use for Vite.",
-      "enum": ["react", "none"],
+      "enum": ["react", "vue", "none"],
       "default": "react",
       "x-prompt": "What UI framework plugin should Vite use?"
     },

packages/vite/src/generators/vitest/schema.d.ts

@@ -1,6 +1,6 @@
 export interface VitestGeneratorSchema {
   project: string;
-  uiFramework: 'react' | 'none';
+  uiFramework: 'react' | 'vue' | 'none';
   coverageProvider: 'v8' | 'c8' | 'istanbul';
   inSourceTests?: boolean;
   skipViteConfig?: boolean;

packages/vite/src/generators/vitest/schema.json

@@ -15,7 +15,7 @@
     },
     "uiFramework": {
       "type": "string",
-      "enum": ["react", "none"],
+      "enum": ["react", "vue", "none"],
       "default": "none",
       "description": "UI framework to use with vitest."
     },

packages/vite/src/generators/vitest/vitest-generator.ts

@@ -90,13 +90,24 @@ function updateTsConfig(
   projectRoot: string
 ) {
   updateJson(tree, joinPathFragments(projectRoot, 'tsconfig.json'), (json) => {
-    if (
-      json.references &&
-      !json.references.some((r) => r.path === './tsconfig.spec.json')
-    ) {
-      json.references.push({
-        path: './tsconfig.spec.json',
-      });
+    if (options.uiFramework === 'vue') {
+      if (
+        json.references &&
+        !json.references.some((r) => r.path === './tsconfig.vitest.json')
+      ) {
+        json.references.push({
+          path: './tsconfig.vitest.json',
+        });
+      }
+    } else {
+      if (
+        json.references &&
+        !json.references.some((r) => r.path === './tsconfig.spec.json')
+      ) {
+        json.references.push({
+          path: './tsconfig.spec.json',
+        });
+      }
     }
 
     if (!json.compilerOptions?.types?.includes('vitest')) {

packages/vue/generators.json

@@ -1,5 +1,21 @@
 {
   "name": "Nx Vue",
   "version": "0.1",
-  "generators": {}
+  "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",
+      "schema": "./src/generators/library/schema.json",
+      "aliases": ["lib"],
+      "x-type": "library",
+      "description": "Create a Vue library."
+    }
+  }
 }

packages/vue/index.ts

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

packages/vue/package.json

@@ -28,7 +28,11 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "@nx/devkit": "file:../devkit",
+    "@nx/js": "file:../js",
+    "@nx/linter": "file:../linter",
+    "@nx/vite": "file:../web"
   },
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component --export should add to index.ts barrel 1`] = `
+"export * from './lib/hello/hello';
+"
+`;
+
+exports[`component should generate files 1`] = `
+"<script setup lang="ts">
+defineProps<{}>();
+</script>
+
+<template>
+  <div>
+    <p>Welcome to Hello!</p>
+  </div>
+</template>
+
+<style scoped>
+div {
+  color: pink;
+}
+</style>
+"
+`;
+
+exports[`component should generate files 2`] = `
+"import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import Hello from '../hello';
+
+describe('Hello', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Hello, { props: {} });
+    expect(wrapper.text()).toContain('Welcome to Hello');
+  });
+});
+"
+`;