feat(cta): add preset for vue-cli (#1473)

tooling/create-tauri-app/bin/create-tauri-app.js

@@ -197,23 +197,26 @@ async function runInit(argv, config = {}) {
     }
   }, []);
 
-  console.log("===== installing any additional needed deps =====");
-  await install({
-    appDir: appDirectory,
-    dependencies: recipe.extraNpmDependencies,
-    devDependencies: ["@tauri-apps/cli", ...recipe.extraNpmDevDependencies],
-    packageManager,
-  });
+  // Vue CLI plugin automatically runs these
+  if (recipe.shortName !== "vuecli") {
+    console.log("===== installing any additional needed deps =====");
+    await install({
+      appDir: appDirectory,
+      dependencies: recipe.extraNpmDependencies,
+      devDependencies: ["@tauri-apps/cli", ...recipe.extraNpmDevDependencies],
+      packageManager,
+    });
 
-  console.log("===== running tauri init =====");
-  const binary = !argv.b ? packageManager : resolve(appDirectory, argv.b);
-  const runTauriArgs =
-    packageManager === "npm" && !argv.b
-      ? ["run", "tauri", "--", "init"]
-      : ["tauri", "init"];
-  await shell(binary, [...runTauriArgs, ...initArgs], {
-    cwd: appDirectory,
-  });
+    console.log("===== running tauri init =====");
+    const binary = !argv.b ? packageManager : resolve(appDirectory, argv.b);
+    const runTauriArgs =
+      packageManager === "npm" && !argv.b
+        ? ["run", "tauri", "--", "init"]
+        : ["tauri", "init"];
+    await shell(binary, [...runTauriArgs, ...initArgs], {
+      cwd: appDirectory,
+    });
+  }
 
   if (recipe.postInit) {
     console.log("===== running final command(s) =====");

tooling/create-tauri-app/src/index.ts

@@ -5,6 +5,7 @@
 import { map, find } from "lodash";
 import { TauriBuildConfig } from "./types/config";
 import { reactjs, reactts } from "./recipes/react";
+import { vuecli } from "./recipes/vue-cli";
 import { vanillajs } from "./recipes/vanilla";
 import { vite } from "./recipes/vite";
 
@@ -44,7 +45,7 @@ export interface Recipe {
   }) => Promise<void>;
 }
 
-export const allRecipes: Recipe[] = [vanillajs, reactjs, reactts, vite];
+export const allRecipes: Recipe[] = [vanillajs, reactjs, reactts, vite, vuecli];
 
 export const recipeNames: Array<[string, string]> = map(
   allRecipes,

tooling/create-tauri-app/src/recipes/vue-cli.ts

@@ -0,0 +1,41 @@
+import { Recipe } from "..";
+import { join } from "path";
+//@ts-ignore
+import { shell } from "../shell";
+
+const completeLogMsg = `
+  Your installation completed.
+  To start, run yarn tauri:serve
+`;
+
+const vuecli: Recipe = {
+  descriptiveName: "Vue CLI",
+  shortName: "vuecli",
+  extraNpmDevDependencies: [],
+  extraNpmDependencies: [],
+  configUpdate: ({ cfg }) => cfg,
+  preInit: async ({ cwd, cfg }) => {
+    // Vue CLI creates the folder for you
+    await shell("npx", ["@vue/cli", "create", `${cfg.appName}`], { cwd });
+    await shell(
+      "npx",
+      [
+        "@vue/cli",
+        "add",
+        "tauri",
+        "--appName",
+        `${cfg.appName}`,
+        "--windowTitle",
+        `${cfg.windowTitle}`,
+      ],
+      {
+        cwd: join(cwd, cfg.appName),
+      }
+    );
+  },
+  postInit: async () => {
+    console.log(completeLogMsg);
+  },
+};
+
+export { vuecli };