nuxt-bake 1.0.1

package/src/helpers/utils.ts

@@ -0,0 +1,83 @@
+import path from "node:path"
+import fs from "fs-extra"
+import inquirer from "inquirer"
+
+export type Preset = "standard" | "with-i18n" | "with-tests"
+
+export const REPO_URL = "https://github.com/matimortari/nuxt-bake.git"
+
+export const PRESET_EXTRA_SCRIPTS: Record<Preset, Record<string, string>> = {
+  "standard": {},
+  "with-i18n": {},
+  "with-tests": {
+    "test": "vitest",
+    "test:e2e": "playwright test",
+    "coverage": "vitest --coverage",
+  },
+}
+
+export const PRESET_EXTRA_PACKAGES: Record<Preset, { dependencies?: Record<string, string>, devDependencies?: Record<string, string>, scripts?: Record<string, string> }> = {
+  "standard": {},
+  "with-i18n": {
+    dependencies: {
+      "@nuxtjs/i18n": "10.2.3",
+    },
+  },
+  "with-tests": {
+    devDependencies: {
+      "@nuxt/test-utils": "3.23.0",
+      "@vitest/coverage-v8": "4.0.18",
+      "@vue/test-utils": "3.20.0",
+      "happy-dom": "20.3.4",
+      "@playwright/test": "1.58.2",
+      "vitest": "4.0.18",
+    },
+  },
+}
+
+export function getProjectNameFromArgs() {
+  const args = process.argv.slice(2)
+  const nIndex = args.findIndex(a => a === "-n" || a === "--name")
+  if (nIndex !== -1 && args.length > nIndex + 1) {
+    return args[nIndex + 1]
+  }
+
+  return null
+}
+
+export async function promptForProjectName() {
+  let projectName = getProjectNameFromArgs()
+  if (!projectName) {
+    const { projectName: answerName } = await inquirer.prompt({
+      type: "input",
+      name: "projectName",
+      message: "Enter your new project folder name:",
+      default: "my-nuxt-app",
+      validate: input => (input ? true : "Project folder name cannot be empty"),
+    })
+
+    projectName = answerName
+  }
+
+  return projectName
+}
+
+export async function validateTargetDirectory(projectName: string) {
+  const targetDir = path.resolve(process.cwd(), projectName)
+  const exists = await fs.pathExists(targetDir)
+  if (exists) {
+    const { overwrite } = await inquirer.prompt({
+      type: "confirm",
+      name: "overwrite",
+      message: `Directory "${projectName}" already exists. Overwrite?`,
+      default: false,
+    })
+    if (!overwrite) {
+      return null
+    }
+
+    await fs.remove(targetDir)
+  }
+
+  return targetDir
+}

package/src/index.ts

@@ -0,0 +1,106 @@
+#!/usr/bin/env node
+import type { Preset } from "./helpers/utils"
+import fs from "fs-extra"
+import inquirer from "inquirer"
+import ora from "ora"
+import { cloneRepoToTemp, promptAndInitGit } from "./helpers/git"
+import { installDependencies, promptForPackageManager, updatePackageJson } from "./helpers/package-manager"
+import { copyPresetFiles, copyRootTemplate } from "./helpers/template"
+import { PRESET_EXTRA_PACKAGES, PRESET_EXTRA_SCRIPTS, promptForProjectName, REPO_URL, validateTargetDirectory } from "./helpers/utils"
+
+async function run() {
+  let tmpDir
+
+  try {
+    const projectName = await promptForProjectName()
+    if (!projectName) {
+      console.log("\nProject name is required. Please provide a valid name.\n")
+      process.exit(1)
+    }
+
+    const targetDir = await validateTargetDirectory(projectName)
+    if (!targetDir) {
+      console.log(`\nFolder "${projectName}" already exists. Please choose another name or remove it.\n`)
+      process.exit(1)
+    }
+
+    const spinnerClone = ora("Creating project root...").start()
+    tmpDir = cloneRepoToTemp(REPO_URL)
+    if (!tmpDir) {
+      spinnerClone.fail("Failed to clone repository.")
+      process.exit(1)
+    }
+
+    const rootTemplateDir = await copyRootTemplate(tmpDir, targetDir)
+    spinnerClone.succeed()
+
+    const { preset } = await inquirer.prompt<{ preset: Preset }>({
+      type: "list",
+      name: "preset",
+      message: "Select a preset:",
+      choices: [
+        { name: "Standard", value: "" },
+        { name: "With i18n", value: "with-i18n" },
+        { name: "With Tests", value: "with-tests" },
+      ],
+    })
+
+    await copyPresetFiles(tmpDir, preset, targetDir)
+    await updatePackageJson(rootTemplateDir, targetDir, preset, {
+      dependencies: PRESET_EXTRA_PACKAGES[preset]?.dependencies || {},
+      devDependencies: PRESET_EXTRA_PACKAGES[preset]?.devDependencies || {},
+      scripts: PRESET_EXTRA_SCRIPTS[preset] || {},
+    })
+
+    const { installDeps } = await inquirer.prompt({
+      type: "confirm",
+      name: "installDeps",
+      message: "Install dependencies now?",
+      default: true,
+    })
+    if (installDeps) {
+      const pkgManager = await promptForPackageManager()
+      const spinnerInstall = ora("Installing dependencies...").start()
+      await installDependencies(targetDir, pkgManager)
+      spinnerInstall.succeed("Dependencies installed!")
+    }
+
+    const { initGit } = await inquirer.prompt({
+      type: "confirm",
+      name: "initGit",
+      message: "Initialize a Git repository?",
+      default: true,
+    })
+    if (initGit) {
+      const spinnerGit = ora("Initializing Git repo...").start()
+      promptAndInitGit(targetDir)
+      spinnerGit.succeed(`Git repository initialized for ${projectName}`)
+    }
+
+    console.log(`
+  Project setup complete!
+
+  Next steps:
+    1. Navigate to your project:
+     cd ${projectName}
+
+     2. Migrate or push database schemas:
+     npm run db:migrate
+     npm run db:push
+
+     3. Start the development server:
+      npm run dev
+  `)
+  }
+  catch (err: any) {
+    console.error("Error:", err)
+    process.exit(1)
+  }
+  finally {
+    if (tmpDir && await fs.pathExists(tmpDir)) {
+      await fs.remove(tmpDir)
+    }
+  }
+}
+
+run()

package/templates/base/.env.example

@@ -0,0 +1,11 @@
+NUXT_PUBLIC_BASE_URL=""
+
+DATABASE_URL=""
+
+NUXT_SESSION_PASSWORD=""
+
+NUXT_OAUTH_GITHUB_CLIENT_ID=""
+NUXT_OAUTH_GITHUB_CLIENT_SECRET=""
+
+NUXT_OAUTH_GOOGLE_CLIENT_ID=""
+NUXT_OAUTH_GOOGLE_CLIENT_SECRET=""

package/templates/base/README.md

@@ -0,0 +1,58 @@
+# Nuxt Bake
+
+This project was scaffolded using [**Nuxt Bake**](https://www.npmjs.com/package/nuxt-bake) – a modern Nuxt.js starter with best practices built-in.
+
+## Getting Started
+
+### 1. Install Dependencies
+
+```bash
+npm install
+```
+
+### 2. Configure Environment Variables
+
+Copy the `.env.example` file to `.env` and fill in your environment-specific values:
+
+```bash
+cp .env.example .env
+```
+
+Refer to the `.env.example` file for details on required variables.
+
+### 3. Set Up the Database
+
+Run Prisma migrations to set up your database schema:
+
+```bash
+npm run db:migrate
+```
+
+Or use push for prototyping (no migration files):
+
+```bash
+npm run db:push
+```
+
+### 4. Start Development Server
+
+```bash
+npm run dev
+```
+
+Your app will be available at `http://localhost:3000`.
+
+## Available Scripts
+
+- `dev` – Start the development server
+- `build` – Build for production
+- `typecheck` – Run TypeScript type checking
+- `lint` – Lint the codebase
+- `lint:fix` – Lint and auto-fix issues
+- `db:generate` – Generate Prisma Client
+- `db:push` – Push schema changes to the database
+- `db:migrate` – Create and apply migrations
+
+## Learn More
+
+Visit the [Nuxt Bake documentation](https://www.npmjs.com/package/nuxt-bake) for more information about this starter template.

package/templates/base/app/app.vue

@@ -0,0 +1,20 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+
+  <Toast />
+</template>
+
+<script setup lang="ts">
+useSeoMeta({
+  ogImage: "/og-image.png",
+  twitterImage: "/og-image.png",
+})
+
+useHead({
+  htmlAttrs: { lang: "en" },
+  link: [{ rel: "icon", href: "/favicon.svg" }],
+  meta: [{ name: "viewport", content: "width=device-width, initial-scale=1" }],
+})
+</script>

package/templates/base/app/assets/styles.css

@@ -0,0 +1,257 @@
+@import "tailwindcss";
+
+/*
+  Base styles
+*/
+:root {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-default);
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+  Base color tokens
+*/
+:root {
+  --background: #f1f1f1;
+  --foreground: #0f0f0f;
+  --card: #e7e4e4;
+  --input: #e7e4e4;
+  --muted: #e1e1e1;
+  --muted-foreground: #707070;
+  --surface-foreground: #e5e7eb;
+  --primary: #56cb82;
+  --secondary: #2a3643;
+  --danger: #ed3c50;
+  --success: #42b883;
+}
+
+html.dark {
+  --background: #0f0f0f;
+  --foreground: #f1f1f1;
+  --card: #1a1a1a;
+  --input: #1a1a1a;
+  --muted: #242424;
+  --muted-foreground: #9b9b9b;
+  --surface-foreground: #e5e7eb;
+  --primary: #56cb82;
+  --secondary: #2a3643;
+  --danger: #ed3c50;
+  --success: #42b883;
+}
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-input: var(--input);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-danger: var(--danger);
+  --color-success: var(--success);
+
+  --font-default: "Inter", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+}
+
+/*
+  Global resets and accessibility
+*/
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--muted);
+  }
+}
+
+/*
+  Typography
+*/
+h1 {
+  font-size: 2.25rem;
+  line-height: 2.25rem;
+  font-weight: 800;
+}
+h2 {
+  font-size: 2rem;
+  line-height: 2rem;
+  font-weight: 800;
+}
+h3 {
+  font-size: 1.875rem;
+  line-height: 1.875rem;
+  font-weight: 700;
+}
+h4 {
+  font-size: 1.75rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+h5 {
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+}
+h6 {
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+}
+
+/*
+  UI elements
+*/
+.card {
+  background-color: var(--card);
+  border: 1px solid var(--muted);
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+}
+
+.overlay {
+  background-color: var(--card);
+  border: 1px solid var(--muted);
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  z-index: 50;
+  box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.4);
+}
+
+/*
+  Form elements
+*/
+input,
+textarea,
+select {
+  appearance: none;
+  background-color: var(--card);
+  color: var(--muted-foreground);
+  border: 1px solid var(--muted);
+  accent-color: var(--muted);
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+}
+
+/*
+  Buttons
+*/
+.btn,
+.btn-primary,
+.btn-secondary,
+.btn-danger,
+.btn-success,
+.btn-ghost {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 0.5rem;
+  white-space: nowrap;
+  user-select: none;
+  transition: all 0.2s ease-in-out;
+}
+
+.btn:hover,
+.btn-primary:hover,
+.btn-secondary:hover,
+.btn-danger:hover,
+.btn-success:hover,
+.btn-ghost:hover {
+  transform: scale(1.02);
+  filter: brightness(0.9);
+}
+
+.btn:active,
+.btn-primary:active,
+.btn-secondary:active,
+.btn-danger:active,
+.btn-success:active,
+.btn-ghost:active {
+  transform: scale(1);
+  filter: brightness(0.6);
+}
+
+.btn:disabled,
+.btn-primary:disabled,
+.btn-secondary:disabled,
+.btn-danger:disabled,
+.btn-success:disabled,
+.btn-ghost:disabled {
+  filter: brightness(0.8);
+  cursor: not-allowed;
+}
+
+.btn {
+  --btn-bg: var(--card);
+  --btn-fg: var(--foreground);
+}
+.btn-primary {
+  --btn-bg: var(--primary);
+  --btn-fg: var(--surface-foreground);
+}
+.btn-secondary {
+  --btn-bg: var(--secondary);
+  --btn-fg: var(--surface-foreground);
+}
+.btn-danger {
+  --btn-bg: var(--danger);
+  --btn-fg: var(--surface-foreground);
+}
+.btn-success {
+  --btn-bg: var(--success);
+  --btn-fg: var(--surface-foreground);
+}
+.btn-ghost {
+  --btn-bg: transparent;
+  --btn-fg: var(--foreground);
+  border-color: transparent;
+}
+.btn-ghost:hover {
+  background-color: color-mix(in srgb, var(--muted) 60%, transparent);
+}
+
+.btn,
+.btn-primary,
+.btn-secondary,
+.btn-danger,
+.btn-success,
+.btn-ghost {
+  background-color: var(--btn-bg);
+  color: var(--btn-fg);
+}
+
+/*
+  Background color utilities
+*/
+.bg-primary {
+  background-color: var(--primary);
+  color: var(--surface-foreground);
+}
+.bg-secondary {
+  background-color: var(--secondary);
+  color: var(--surface-foreground);
+}
+.bg-muted {
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+}

package/templates/base/app/components/dialog.vue

@@ -0,0 +1,54 @@
+<template>
+  <teleport to="body">
+    <transition name="fade">
+      <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80" @mousedown.self="emit('update:isOpen', false)">
+        <div class="overlay">
+          <header class="flex flex-row items-center justify-between gap-4">
+            <h3>
+              {{ title }}
+            </h3>
+
+            <button aria-label="Close Dialog" class="btn-ghost" @mousedown="emit('update:isOpen', false)">
+              <icon name="mdi:close" size="20" />
+            </button>
+          </header>
+
+          <section>
+            <slot />
+          </section>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  isOpen: boolean
+  title?: string
+}>(), {
+  title: "Dialog Title",
+})
+
+const emit = defineEmits<{ "update:isOpen": [value: boolean] }>()
+
+function onEscape(e: KeyboardEvent) {
+  if (e.key === "Escape" && props.isOpen) {
+    emit("update:isOpen", false)
+  }
+}
+
+onMounted(() => document.addEventListener("keydown", onEscape))
+onBeforeUnmount(() => document.removeEventListener("keydown", onEscape))
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.4s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/templates/base/app/components/navbar.vue

@@ -0,0 +1,51 @@
+<template>
+  <nav class="flex w-full flex-row items-center justify-between gap-2 p-4">
+    <div class="flex flex-row items-center gap-2">
+      <nuxt-link to="/">
+        <icon name="simple-icons:nuxt" size="35" class="text-primary" />
+      </nuxt-link>
+
+      <div v-if="userStore.user" class="flex flex-row items-center gap-2">
+        <p class="text-sm">
+          Hi, <span class="font-semibold text-primary">{{ userStore.user?.name }}</span>
+        </p>
+        <button class="btn" @click="signOut">
+          Logout
+        </button>
+      </div>
+
+      <div v-else class="flex flex-row items-center gap-2">
+        <p class="text-sm">
+          Unauthenticated
+        </p>
+        <nuxt-link to="/sign-in" class="btn">
+          Sign In
+        </nuxt-link>
+      </div>
+    </div>
+
+    <div class="flex flex-row items-center gap-2">
+      <nuxt-link to="https://github.com/matimortari/nuxt-bake" class="btn">
+        <icon name="simple-icons:github" size="20" />
+      </nuxt-link>
+
+      <button class="btn" @click="toggleTheme">
+        <icon :name="themeIcon" size="20" />
+      </button>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+const { toggleTheme, themeIcon } = useTheme()
+const userStore = useUserStore()
+
+onMounted(async () => {
+  try {
+    await userStore.getUser()
+  }
+  catch (err: any) {
+    console.error("Failed to fetch user:", err)
+  }
+})
+</script>