create-vault/frontend/vue.js

A CLI tool to instantly set up a Full Stack (MERN) or Backend project with a structured folder system and pre-installed dependencies.

import path from "path";
import fs from "fs";
import { execSync } from "child_process";
import chalk from "chalk";

const ensureDirExists = (dirPath) => {
  if (!fs.existsSync(dirPath)) {
    fs.mkdirSync(dirPath, { recursive: true });
  }
};

const createOrUpdateFile = (filePath, content = "") => {
  ensureDirExists(path.dirname(filePath));
  fs.writeFileSync(filePath, content);
};

const setupFrontend = async (baseDir) => {
  console.log(
    chalk.cyanBright("Setting up the Client Application (Frontend)") +
      chalk.green(" using Vuejs with TailwindCSS 3...") +
      "\n"
  );
  try {
    console.log(chalk.yellow("Installing Vue CLI globally..."));
    execSync(`npm install -g @angular/cli`, {
      cwd: baseDir,
      stdio: "inherit",
    });

    console.log(chalk.yellow("Setting up Vue..."));
    execSync(`npm create vue@latest app`, {
      cwd: baseDir,
      stdio: "inherit",
    });

    const frontendDir = path.join(baseDir, "app");

    console.log(chalk.yellow("Installing TailwindCSS 3..."));
    execSync(`npm install -D tailwindcss@3 postcss autoprefixer`, {
      cwd: frontendDir,
      stdio: "inherit",
    });

    console.log(chalk.yellow("Initializing TailwindCSS..."));
    execSync(`npx tailwindcss init`, {
      cwd: frontendDir,
      stdio: "inherit",
    });

    console.log(chalk.yellow("Configuring TailwindCSS 3..."));
    const tailwindConfigPath = path.join(frontendDir, "tailwind.config.js");
    const tailwindConfigContent = `/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}`;
    createOrUpdateFile(tailwindConfigPath, tailwindConfigContent);

    const stylesCssPath = path.join(frontendDir, "src", "styles.css");
    const stylesCssContent = `@tailwind base;
@tailwind components;
@tailwind utilities;
`;
    createOrUpdateFile(stylesCssPath, stylesCssContent);

    console.log(
      chalk.green("Client Application (Frontend) setup complete! using Vue!")
    );
  } catch (error) {}
};

export default setupFrontend;