feat(vue): add vue to create-nx-workspace presets

.gitignore

@@ -12,6 +12,7 @@ tmp
 jest.debug.config.js
 .tool-versions
 /.nx-cache
+/.nx
 /.verdaccio/build/local-registry
 /graph/client/src/assets/environment.js
 /graph/client/src/assets/dev/environment.js

docs/generated/cli/create-nx-workspace.md

@@ -139,7 +139,7 @@ Package manager to use
 
 Type: `string`
 
-Customizes the initial content of your workspace. Default presets include: ["apps", "empty", "core", "npm", "ts", "web-components", "angular-monorepo", "angular-standalone", "react-monorepo", "react-standalone", "next", "nextjs-standalone", "react-native", "expo", "nest", "express", "react", "angular", "node-standalone", "node-monorepo", "ts-standalone"]. To build your own see https://nx.dev/extending-nx/recipes/create-preset
+Customizes the initial content of your workspace. Default presets include: ["apps", "empty", "core", "npm", "ts", "web-components", "angular-monorepo", "angular-standalone", "react-monorepo", "react-standalone", "vue-monorepo", "vue-standalone", "next", "nextjs-standalone", "react-native", "expo", "nest", "express", "react", "angular", "vue", "node-standalone", "node-monorepo", "ts-standalone"]. To build your own see https://nx.dev/extending-nx/recipes/create-preset
 
 ### routing
 

docs/generated/packages/nx/documents/create-nx-workspace.md

@@ -139,7 +139,7 @@ Package manager to use
 
 Type: `string`
 
-Customizes the initial content of your workspace. Default presets include: ["apps", "empty", "core", "npm", "ts", "web-components", "angular-monorepo", "angular-standalone", "react-monorepo", "react-standalone", "next", "nextjs-standalone", "react-native", "expo", "nest", "express", "react", "angular", "node-standalone", "node-monorepo", "ts-standalone"]. To build your own see https://nx.dev/extending-nx/recipes/create-preset
+Customizes the initial content of your workspace. Default presets include: ["apps", "empty", "core", "npm", "ts", "web-components", "angular-monorepo", "angular-standalone", "react-monorepo", "react-standalone", "vue-monorepo", "vue-standalone", "next", "nextjs-standalone", "react-native", "expo", "nest", "express", "react", "angular", "vue", "node-standalone", "node-monorepo", "ts-standalone"]. To build your own see https://nx.dev/extending-nx/recipes/create-preset
 
 ### routing
 

packages/create-nx-workspace/bin/create-nx-workspace.ts

@@ -62,6 +62,16 @@ interface AngularArguments extends BaseArguments {
   e2eTestRunner: 'none' | 'cypress' | 'playwright';
 }
 
+interface VueArguments extends BaseArguments {
+  stack: 'vue';
+  workspaceType: 'standalone' | 'integrated';
+  appName: string;
+  // framework: 'none' | 'nuxt';
+  style: string;
+  // nextAppDir: boolean;
+  e2eTestRunner: 'none' | 'cypress' | 'playwright';
+}
+
 interface NodeArguments extends BaseArguments {
   stack: 'node';
   workspaceType: 'standalone' | 'integrated';
@@ -78,6 +88,7 @@ type Arguments =
   | NoneArguments
   | ReactArguments
   | AngularArguments
+  | VueArguments
   | NodeArguments
   | UnknownStackArguments;
 
@@ -347,7 +358,7 @@ async function determineFolder(
 
 async function determineStack(
   parsedArgs: yargs.Arguments<Arguments>
-): Promise<'none' | 'react' | 'angular' | 'node' | 'unknown'> {
+): Promise<'none' | 'react' | 'angular' | 'vue' | 'node' | 'unknown'> {
   if (parsedArgs.preset) {
     switch (parsedArgs.preset) {
       case Preset.Angular:
@@ -360,7 +371,10 @@ async function determineStack(
       case Preset.NextJs:
       case Preset.NextJsStandalone:
         return 'react';
-
+      case Preset.Vue:
+      case Preset.VueStandalone:
+      case Preset.VueMonorepo:
+        return 'vue';
       case Preset.Nest:
       case Preset.NodeStandalone:
       case Preset.Express:
@@ -379,7 +393,7 @@ async function determineStack(
   }
 
   const { stack } = await enquirer.prompt<{
-    stack: 'none' | 'react' | 'angular' | 'node';
+    stack: 'none' | 'react' | 'angular' | 'node' | 'vue';
   }>([
     {
       name: 'stack',
@@ -394,6 +408,10 @@ async function determineStack(
           name: `react`,
           message: `React:         Configures a React application with your framework of choice.`,
         },
+        {
+          name: `vue`,
+          message: `Vue:           Configures a Vue application with modern tooling.`,
+        },
         {
           name: `angular`,
           message: `Angular:       Configures a Angular application with modern tooling.`,
@@ -419,6 +437,8 @@ async function determinePresetOptions(
       return determineReactOptions(parsedArgs);
     case 'angular':
       return determineAngularOptions(parsedArgs);
+    case 'vue':
+      return determineVueOptions(parsedArgs);
     case 'node':
       return determineNodeOptions(parsedArgs);
     default:
@@ -589,6 +609,74 @@ async function determineReactOptions(
   return { preset, style, appName, bundler, nextAppDir, e2eTestRunner };
 }
 
+async function determineVueOptions(
+  parsedArgs: yargs.Arguments<VueArguments>
+): Promise<Partial<Arguments>> {
+  let preset: Preset;
+  let style: undefined | string = undefined;
+  let appName: string;
+  let e2eTestRunner: undefined | 'none' | 'cypress' | 'playwright' = undefined;
+
+  if (parsedArgs.preset && parsedArgs.preset !== Preset.Vue) {
+    preset = parsedArgs.preset;
+    if (preset === Preset.VueStandalone || preset === Preset.VueMonorepo) {
+      appName = parsedArgs.appName ?? parsedArgs.name;
+    } else {
+      appName = await determineAppName(parsedArgs);
+    }
+  } else {
+    const workspaceType = await determineStandaloneOrMonorepo();
+
+    if (workspaceType === 'standalone') {
+      appName = parsedArgs.name;
+    } else {
+      appName = await determineAppName(parsedArgs);
+    }
+
+    if (workspaceType === 'standalone') {
+      preset = Preset.VueStandalone;
+    } else {
+      preset = Preset.VueMonorepo;
+    }
+  }
+
+  e2eTestRunner = await determineE2eTestRunner(parsedArgs);
+
+  if (parsedArgs.style) {
+    style = parsedArgs.style;
+  } else if (preset === Preset.VueMonorepo || preset === Preset.VueStandalone) {
+    const reply = await enquirer.prompt<{ style: string }>([
+      {
+        name: 'style',
+        message: `Default stylesheet format`,
+        initial: 'css' as any,
+        type: 'autocomplete',
+        choices: [
+          {
+            name: 'css',
+            message: 'CSS',
+          },
+          {
+            name: 'scss',
+            message: 'SASS(.scss)       [ http://sass-lang.com   ]',
+          },
+          {
+            name: 'less',
+            message: 'LESS              [ http://lesscss.org     ]',
+          },
+          {
+            name: 'none',
+            message: 'None',
+          },
+        ],
+      },
+    ]);
+    style = reply.style;
+  }
+
+  return { preset, style, appName, e2eTestRunner };
+}
+
 async function determineAngularOptions(
   parsedArgs: yargs.Arguments<AngularArguments>
 ): Promise<Partial<Arguments>> {
@@ -847,7 +935,9 @@ async function determineStandaloneOrMonorepo(): Promise<
 }
 
 async function determineAppName(
-  parsedArgs: yargs.Arguments<ReactArguments | AngularArguments | NodeArguments>
+  parsedArgs: yargs.Arguments<
+    ReactArguments | AngularArguments | NodeArguments | VueArguments
+  >
 ): Promise<string> {
   if (parsedArgs.appName) return parsedArgs.appName;
 

packages/create-nx-workspace/src/utils/preset/preset-options.ts

@@ -19,6 +19,10 @@ export const presetOptions: { name: Preset; message: string }[] = [
     name: Preset.AngularMonorepo,
     message: 'angular           [a monorepo with a single Angular application]',
   },
+  {
+    name: Preset.VueMonorepo,
+    message: 'vue               [a monorepo with a single Vue application]',
+  },
   {
     name: Preset.NextJs,
     message: 'next.js           [a monorepo with a single Next.js application]',

packages/create-nx-workspace/src/utils/preset/preset.ts

@@ -9,6 +9,8 @@ export enum Preset {
   AngularStandalone = 'angular-standalone',
   ReactMonorepo = 'react-monorepo',
   ReactStandalone = 'react-standalone',
+  VueMonorepo = 'vue-monorepo',
+  VueStandalone = 'vue-standalone',
   NextJs = 'next',
   NextJsStandalone = 'nextjs-standalone',
   ReactNative = 'react-native',
@@ -17,6 +19,7 @@ export enum Preset {
   Express = 'express',
   React = 'react',
   Angular = 'angular',
+  Vue = 'vue',
   NodeStandalone = 'node-standalone',
   NodeMonorepo = 'node-monorepo',
   TsStandalone = 'ts-standalone',

packages/workspace/src/generators/new/__snapshots__/generate-workspace-files.spec.ts.snap

@@ -1134,6 +1134,136 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you
 "
 `;
 
+exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for VueMonorepo preset 1`] = `
+"# Proj
+
+<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+
+✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
+
+## Start the app
+
+To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+
+## Generate code
+
+If you happen to use Nx plugins, you can leverage code generators that might come with it.
+
+Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list <plugin-name>\` to see what generators are available.
+
+Learn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).
+
+## Running tasks
+
+To execute tasks with Nx use the following syntax:
+
+\`\`\`
+nx <target> <project> <...options>
+\`\`\`
+
+You can also run multiple targets:
+
+\`\`\`
+nx run-many -t <target1> <target2>
+\`\`\`
+
+..or add \`-p\` to filter specific projects
+
+\`\`\`
+nx run-many -t <target1> <target2> -p <proj1> <proj2>
+\`\`\`
+
+Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/core-features/run-tasks).
+
+## Want better Editor Integration?
+
+Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
+
+## Ready to deploy?
+
+Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed.
+
+## Set up CI!
+
+Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further.
+
+- [Set up remote caching](https://nx.dev/core-features/share-your-cache)
+- [Set up task distribution across multiple machines](https://nx.dev/core-features/distribute-task-execution)
+- [Learn more how to setup CI](https://nx.dev/recipes/ci)
+
+## Connect with us!
+
+- [Join the community](https://nx.dev/community)
+- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
+- [Follow us on Twitter](https://twitter.com/nxdevtools)
+"
+`;
+
+exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for VueStandalone preset 1`] = `
+"# Proj
+
+<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+
+✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
+
+## Start the app
+
+To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+
+## Generate code
+
+If you happen to use Nx plugins, you can leverage code generators that might come with it.
+
+Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list <plugin-name>\` to see what generators are available.
+
+Learn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).
+
+## Running tasks
+
+To execute tasks with Nx use the following syntax:
+
+\`\`\`
+nx <target> <project> <...options>
+\`\`\`
+
+You can also run multiple targets:
+
+\`\`\`
+nx run-many -t <target1> <target2>
+\`\`\`
+
+..or add \`-p\` to filter specific projects
+
+\`\`\`
+nx run-many -t <target1> <target2> -p <proj1> <proj2>
+\`\`\`
+
+Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/core-features/run-tasks).
+
+## Want better Editor Integration?
+
+Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
+
+## Ready to deploy?
+
+Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed.
+
+## Set up CI!
+
+Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further.
+
+- [Set up remote caching](https://nx.dev/core-features/share-your-cache)
+- [Set up task distribution across multiple machines](https://nx.dev/core-features/distribute-task-execution)
+- [Learn more how to setup CI](https://nx.dev/recipes/ci)
+
+## Connect with us!
+
+- [Join the community](https://nx.dev/community)
+- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
+- [Follow us on Twitter](https://twitter.com/nxdevtools)
+"
+`;
+
 exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for WebComponents preset 1`] = `
 "# Proj
 

packages/workspace/src/generators/new/generate-preset.ts

@@ -119,6 +119,19 @@ function getPresetDependencies({
     case Preset.NextJsStandalone:
       return { dependencies: { '@nx/next': nxVersion }, dev: {} };
 
+    case Preset.VueMonorepo:
+    case Preset.VueStandalone:
+      return {
+        dependencies: {},
+        dev: {
+          '@nx/vue': nxVersion,
+          '@nx/cypress': e2eTestRunner === 'cypress' ? nxVersion : undefined,
+          '@nx/playwright':
+            e2eTestRunner === 'playwright' ? nxVersion : undefined,
+          '@nx/vite': nxVersion,
+        },
+      };
+
     case Preset.ReactMonorepo:
     case Preset.ReactStandalone:
       return {

packages/workspace/src/generators/new/generate-workspace-files.spec.ts

@@ -36,6 +36,8 @@ describe('@nx/workspace:generateWorkspaceFiles', () => {
           [
             Preset.ReactMonorepo,
             Preset.ReactStandalone,
+            Preset.VueMonorepo,
+            Preset.VueStandalone,
             Preset.AngularMonorepo,
             Preset.AngularStandalone,
             Preset.Nest,