docs(core): Add vue documentation for nx-recipe (#18556)

docs/generated/manifests/menus.json

@@ -3631,6 +3631,14 @@
                 "children": [],
                 "disableCollapsible": false
               },
+              {
+                "name": "Add a Vue Project",
+                "path": "/showcase/example-repos/add-vue",
+                "id": "add-vue",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
               {
                 "name": "Powering Up React Development With Nx",
                 "path": "/showcase/example-repos/react-nx",
@@ -3755,6 +3763,14 @@
             "children": [],
             "disableCollapsible": false
           },
+          {
+            "name": "Add a Vue Project",
+            "path": "/showcase/example-repos/add-vue",
+            "id": "add-vue",
+            "isExternal": false,
+            "children": [],
+            "disableCollapsible": false
+          },
           {
             "name": "Powering Up React Development With Nx",
             "path": "/showcase/example-repos/react-nx",
@@ -3870,6 +3886,14 @@
         "children": [],
         "disableCollapsible": false
       },
+      {
+        "name": "Add a Vue Project",
+        "path": "/showcase/example-repos/add-vue",
+        "id": "add-vue",
+        "isExternal": false,
+        "children": [],
+        "disableCollapsible": false
+      },
       {
         "name": "Powering Up React Development With Nx",
         "path": "/showcase/example-repos/react-nx",

docs/generated/manifests/nx.json

@@ -4527,6 +4527,16 @@
             "path": "/showcase/example-repos/add-astro",
             "tags": []
           },
+          {
+            "id": "add-vue",
+            "name": "Add a Vue Project",
+            "description": "Add a Vue project to your repo",
+            "file": "shared/recipes/add-stack/add-vue",
+            "itemList": [],
+            "isExternal": false,
+            "path": "/showcase/example-repos/add-vue",
+            "tags": []
+          },
           {
             "id": "react-nx",
             "name": "Powering Up React Development With Nx",
@@ -4683,6 +4693,16 @@
         "path": "/showcase/example-repos/add-astro",
         "tags": []
       },
+      {
+        "id": "add-vue",
+        "name": "Add a Vue Project",
+        "description": "Add a Vue project to your repo",
+        "file": "shared/recipes/add-stack/add-vue",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/showcase/example-repos/add-vue",
+        "tags": []
+      },
       {
         "id": "react-nx",
         "name": "Powering Up React Development With Nx",
@@ -4828,6 +4848,16 @@
     "path": "/showcase/example-repos/add-astro",
     "tags": []
   },
+  "/showcase/example-repos/add-vue": {
+    "id": "add-vue",
+    "name": "Add a Vue Project",
+    "description": "Add a Vue project to your repo",
+    "file": "shared/recipes/add-stack/add-vue",
+    "itemList": [],
+    "isExternal": false,
+    "path": "/showcase/example-repos/add-vue",
+    "tags": []
+  },
   "/showcase/example-repos/react-nx": {
     "id": "react-nx",
     "name": "Powering Up React Development With Nx",

docs/map.json

@@ -1052,6 +1052,12 @@
                   "description": "Add Nx to an Astro project",
                   "file": "shared/recipes/add-stack/add-astro"
                 },
+                {
+                  "name": "Add a Vue Project",
+                  "id": "add-vue",
+                  "description": "Add a Vue project to your repo",
+                  "file": "shared/recipes/add-stack/add-vue"
+                },
                 {
                   "name": "Powering Up React Development With Nx",
                   "id": "react-nx",

docs/shared/recipes/add-stack/add-vue.md

@@ -0,0 +1,222 @@
+# Add a Vue Project
+
+The code for this example is available on Github:
+
+{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/vue" /%}
+
+**Supported Features**
+
+We'll be using an Nx plugin for Vue called [@nx/vite](https://nx.dev/packages/vite). Although we are using `@nx/vite`, not all dependencies will be able to be automatically updated. So we'll have to update any framework dependencies as needed.
+
+{% pill url="/core-features/run-tasks" %}✅ Run Tasks{% /pill %}
+{% pill url="/core-features/cache-task-results" %}✅ Cache Task Results{% /pill %}
+{% pill url="/core-features/remote-cache" %}✅ Share Your Cache{% /pill %}
+{% pill url="/core-features/explore-graph" %}✅ Explore the Graph{% /pill %}
+{% pill url="/core-features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %}
+{% pill url="/core-features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %}
+{% pill url="/core-features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %}
+{% pill url="/core-features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %}
+{% pill url="/core-features/plugin-features/use-task-executors" %}✅ Use Task Executors{% /pill %}
+{% pill url="/core-features/plugin-features/use-code-generators" %}🚫 Use Code Generators{% /pill %}
+{% pill url="/core-features/automate-updating-dependencies" %}🚫 Automate Updating Framework Dependencies{% /pill %}
+
+## Setup workspace
+
+**Create a new Nx workspace**
+
+```shell
+create-nx-workspace@latest acme --preset=ts-standalone --nx-cloud=true
+```
+
+**Add @nx/vite, vue, and other dependencies to your workspace**
+
+{% tabs %}
+{%tab label="npm"%}
+
+```shell
+npm install --save-dev @nx/vite vue vue-tsc vitest vite-tsconfig-paths vite-plugin-dts vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx
+```
+
+{% /tab %}
+{%tab label="yarn"%}
+
+```shell
+yarn add --dev @nx/vite vue vue-tsc vitest vite-tsconfig-paths vite-plugin-dts vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx
+```
+
+{% /tab %}
+{%tab label="pnpm"%}
+
+```shell
+pnpm add --dev @nx/vite vue vue-tsc vitest vite-tsconfig-paths vite-plugin-dts vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx
+```
+
+{% /tab %}
+{% /tabs %}
+
+## Create the application
+
+```shell
+touch index.html
+```
+
+And add the following content:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Acme</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
+```
+
+Navigate to `src/index.ts` and change it to `src/main.ts` and add the following content:
+
+```ts
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
+```
+
+Create a new file `src/App.vue` with the following content:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const count = ref(0);
+
+function increment() {
+  count.value++;
+}
+</script>
+<template>
+  <div>count is {{ count }}</div>
+  <button @click="increment">Increment</button>
+</template>
+```
+
+## Configure Nx to use build and serve your Vue application
+
+1. Navigate to `vite.config.ts` and add the following content:
+
+```ts
+// Add this to your imports
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
+export default defineConfig({
+  plugins: [
+    //.... other plugins
+    vue(),
+    vueJsx(),
+  ],
+});
+```
+
+2. Create a new file `env.d.ts` for example at the root of the project and add the following content:
+
+```ts
+/// <reference types="vite/client" />
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const component: DefineComponent<object, object, any>;
+  export default component;
+}
+```
+
+We need this file to ensure that Vue types are available to the compiler.
+
+3. Update your `tsconfig.lib.json` to be `tsconfig.app.json` an add the following content:
+
+```json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/out-tsc",
+    "types": ["node", "vite/client"],
+    "jsxImportSource": "vue"
+  },
+  "files": [],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "**/*.vue",
+    "vite.config.ts",
+    "env.d.ts"
+  ]
+}
+```
+
+We include `vite.config.ts` and `env.d.ts` to ensure that the types are available to the compiler.
+
+4. Navigate to `project.json` and update it with the following content:
+
+```json
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/test-vue"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "test-vue:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "test-vue:build:development",
+          "hmr": true
+        },
+        "production": {
+          "buildTarget": "test-vue:build:production",
+          "hmr": false
+        }
+      }
+    },
+```
+
+This allows us to use `nx build` and `nx serve` to build and serve our Vue application.
+
+## More Documentation
+
+A larger example including libraries, tests, and more is available at [Nx Vue Example](https://github.com/nrwl/nx-recipes/tree/main/vue) on Github.
+
+- [Nx Vite Plugin](https://nx.dev/latest/vue/vite/overview)
+- [Vite](https://vitejs.dev/)
+- [Vue](https://v3.vuejs.org/)

docs/shared/reference/sitemap.md

@@ -180,6 +180,7 @@
       - [Add a Solid Project](/showcase/example-repos/add-solid)
       - [Add a Qwik Project](/showcase/example-repos/add-qwik)
       - [Add an Astro Project](/showcase/example-repos/add-astro)
+      - [Add a Vue Project](/showcase/example-repos/add-vue)
       - [Powering Up React Development With Nx](/showcase/example-repos/react-nx)
       - [Using Apollo GraphQL](/showcase/example-repos/apollo-react)
       - [Using Prisma with NestJS](/showcase/example-repos/nestjs-prisma)