nuxt-bake 1.0.1

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

@@ -0,0 +1,116 @@
+<template>
+  <Teleport to="body">
+    <div class="toast-container" aria-live="polite" aria-atomic="true">
+      <TransitionGroup name="toast">
+        <div
+          v-for="toast in toasts" :key="toast.id"
+          class="toast" :class="[`toast-${toast.type}`]"
+          role="alert"
+        >
+          <div class="toast-content">
+            <icon :name="toast.type === 'success' ? 'mdi:check-circle-outline' : 'mdi:close-circle-outline'" size="20" />
+            <span class="toast-message">{{ toast.message }}</span>
+          </div>
+          <button class="toast-close" aria-label="Close notification" @click="dismiss(toast.id)">
+            <icon name="mdi:close" size="15" />
+          </button>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const { toasts, dismiss } = useToast()
+</script>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 24rem;
+  pointer-events: none;
+}
+@media (max-width: 640px) {
+  .toast-container {
+    left: 1rem;
+    right: 1rem;
+    max-width: none;
+  }
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: auto;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.toast-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-message {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  word-break: break-word;
+}
+
+.toast-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  flex-shrink: 0;
+  transition: background-color 0.2s;
+}
+
+.toast-close:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.toast-success {
+  background-color: color-mix(in oklab, var(--color-success) 20%, transparent);
+  color: var(--success);
+}
+
+.toast-error {
+  background-color: color-mix(in oklab, var(--color-danger) 20%, transparent);
+  color: var(--danger);
+}
+
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.3s ease;
+}
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+.toast-move {
+  transition: transform 0.3s ease;
+}
+</style>

package/templates/base/app/composables/use-session-monitor.ts

@@ -0,0 +1,40 @@
+export function useSessionMonitor() {
+  const { loggedIn } = useUserSession()
+  const sessionCheckInterval = ref<NodeJS.Timeout | null>(null)
+
+  const clearSessionCheck = () => {
+    if (sessionCheckInterval.value) {
+      clearInterval(sessionCheckInterval.value)
+      sessionCheckInterval.value = null
+    }
+  }
+
+  watch(loggedIn, (isLoggedIn) => {
+    clearSessionCheck()
+
+    if (isLoggedIn && import.meta.client) {
+      sessionCheckInterval.value = setInterval(async () => {
+        try {
+          await $fetch("/api/auth/validate", { method: "POST", credentials: "include" })
+        }
+        catch (err: any) {
+          if (err.statusCode === 401 || err.status === 401) {
+            await signOut()
+          }
+        }
+      }, 5 * 60 * 1000) // 5 minutes
+    }
+  }, { immediate: true })
+
+  const handleStorageChange = async (e: StorageEvent) => {
+    if (e.key === "nuxt-session" && !e.newValue && loggedIn.value) {
+      await navigateTo("/")
+    }
+  }
+
+  onMounted(() => globalThis.addEventListener("storage", handleStorageChange))
+  onBeforeUnmount(() => {
+    clearSessionCheck()
+    globalThis.removeEventListener("storage", handleStorageChange)
+  })
+}

package/templates/base/app/composables/use-theme.ts

@@ -0,0 +1,41 @@
+export function useTheme() {
+  const colorMode = useState<"light" | "dark">("theme", () => "light")
+  const storageKey = "nuxt-color-mode"
+
+  const updateHtmlClass = () => {
+    const html = globalThis.document.documentElement
+    html.classList.remove("light", "dark")
+    html.classList.add(colorMode.value)
+  }
+
+  const syncThemeFromLocalStorage = () => {
+    const saved = globalThis.localStorage.getItem(storageKey)
+    if (saved === "dark" || saved === "light") {
+      colorMode.value = saved
+    }
+    else {
+      const prefersDark = globalThis.matchMedia("(prefers-color-scheme: dark)").matches
+      colorMode.value = prefersDark ? "dark" : "light"
+    }
+
+    updateHtmlClass()
+  }
+
+  const toggleTheme = () => {
+    colorMode.value = colorMode.value === "dark" ? "light" : "dark"
+    globalThis.localStorage.setItem(storageKey, colorMode.value)
+    updateHtmlClass()
+  }
+
+  onMounted(() => {
+    syncThemeFromLocalStorage()
+  })
+
+  const themeIcon = computed(() => colorMode.value === "light" ? "mdi:weather-night" : "mdi:weather-sunny")
+
+  return {
+    colorMode,
+    toggleTheme,
+    themeIcon,
+  }
+}

package/templates/base/app/composables/use-toast.ts

@@ -0,0 +1,37 @@
+const toasts = ref<Toast[]>([])
+let toastIdCounter = 0
+
+export function useToast() {
+  function show(message: string, type: "success" | "error", duration = 5000) {
+    const id = `toast-${++toastIdCounter}`
+    const toast: Toast = { id, message, type, duration }
+
+    toasts.value.push(toast)
+    if (duration > 0) {
+      setTimeout(() => dismiss(id), duration)
+    }
+
+    return id
+  }
+
+  function success(message: string, duration = 5000) {
+    return show(message, "success", duration)
+  }
+
+  function error(message: string, duration = 7000) {
+    return show(message, "error", duration)
+  }
+
+  function dismiss(id: string) {
+    const index = toasts.value.findIndex(t => t.id === id)
+    if (index !== -1) {
+      toasts.value.splice(index, 1)
+    }
+  }
+
+  function clear() {
+    toasts.value = []
+  }
+
+  return { toasts: readonly(toasts), show, success, error, dismiss, clear }
+}

package/templates/base/app/error.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex h-screen flex-col items-center justify-center gap-4">
+    <h1>
+      {{ error.status }}
+    </h1>
+
+    <p class="text-center text-muted-foreground">
+      {{ error.statusText || "Unknown error" }}
+    </p>
+
+    <nuxt-link to="/">
+      Go back home
+    </nuxt-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NuxtError } from "#app"
+
+defineProps<{
+  error: NuxtError
+}>()
+</script>

package/templates/base/app/layouts/default.vue

@@ -0,0 +1,7 @@
+<template>
+  <Navbar />
+
+  <main>
+    <slot />
+  </main>
+</template>

package/templates/base/app/pages/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="flex flex-col items-center justify-center gap-8">
+    <header class="flex w-full flex-col items-center gap-4 p-4">
+      <div class="flex flex-col items-center gap-2 text-center">
+        <icon name="simple-icons:nuxt" size="50" class="text-primary" />
+        <h1>
+          Nuxt Bake
+        </h1>
+        <p>
+          If you're seeing this, it means you've successfully set up your Nuxt.js project via <code class="text-primary">Nuxt Bake</code>.
+        </p>
+      </div>
+    </header>
+
+    <hr class="w-4/5 border-primary!">
+
+    <div class="flex flex-col items-center gap-2">
+      <h2 class="text-lg font-semibold">
+        Features
+      </h2>
+
+      <ul class="grid grid-cols-2 gap-4 md:grid-cols-5">
+        <li v-for="(feature, index) in FEATURES" :key="index" class="flex flex-row items-center gap-2 text-xs font-semibold md:text-sm">
+          <icon :name="feature.icon" :size="20" class="text-primary" />
+          <span>{{ feature.label }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { public: { baseURL } } = useRuntimeConfig()
+
+const FEATURES = [
+  { icon: "simple-icons:nuxtdotjs", label: "Nuxt 4" },
+  { icon: "simple-icons:typescript", label: "TypeScript" },
+  { icon: "simple-icons:tailwindcss", label: "Tailwind CSS 4" },
+  { icon: "simple-icons:iconify", label: "Nuxt Icons" },
+  { icon: "ph:text-aa", label: "Google Fonts" },
+  { icon: "icon-park-outline:pineapple", label: "Pinia" },
+  { icon: "ph:lock-key-open", label: "OAuth" },
+  { icon: "simple-icons:prisma", label: "Prisma" },
+  { icon: "simple-icons:eslint", label: "ESLint" },
+  { icon: "ph:magnifying-glass", label: "SEO" },
+]
+
+useHead({
+  title: "Home",
+  link: [{ rel: "canonical", href: `${baseURL}` }],
+  meta: [{ name: "description", content: "Home page." }],
+})
+</script>

package/templates/base/app/pages/sign-in.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex flex-col items-center justify-center gap-8">
+    <header class="my-4 flex flex-col items-center justify-center gap-2">
+      <h2>
+        Sign In
+      </h2>
+    </header>
+
+    <div class="my-4 flex flex-col items-center gap-4">
+      <p class="text-lg font-semibold text-muted-foreground">
+        Choose a provider to continue.
+      </p>
+      <div class="flex flex-row items-center gap-4">
+        <button
+          v-for="provider in OAUTH_PROVIDERS" :key="provider.name"
+          class="btn" @click="navigateTo(`/api/auth/${provider.name}`, { external: true })"
+        >
+          <icon :name="provider.icon" size="25" />
+          <span>{{ provider.label }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { public: { baseURL } } = useRuntimeConfig()
+
+const OAUTH_PROVIDERS = [
+  { name: "github", label: "Sign In With GitHub", icon: "simple-icons:github" },
+  { name: "google", label: "Sign In With Google", icon: "simple-icons:google" },
+]
+
+useHead({
+  title: "Sign In",
+  link: [{ rel: "canonical", href: `${baseURL}/sign-in` }],
+  meta: [{ name: "description", content: "Sign In page" }],
+})
+</script>

package/templates/base/app/stores/user-store.ts

@@ -0,0 +1,50 @@
+export const useUserStore = defineStore("user", () => {
+  const toast = useToast()
+  const user = ref<Record<string, any> | null>(null)
+  const loading = ref(false)
+
+  async function getUser() {
+    loading.value = true
+
+    try {
+      const res = await $fetch<{ userData: User }>("/api/user", { method: "GET", credentials: "include" })
+      user.value = res.userData
+      return res
+    }
+    catch (err: any) {
+      const message = getErrorMessage(err, "Failed to get user")
+      toast.error(message)
+      console.error("getUser error:", err)
+      throw err
+    }
+    finally {
+      loading.value = false
+    }
+  }
+
+  async function deleteUser() {
+    loading.value = true
+
+    try {
+      await $fetch("/api/user", { method: "DELETE", credentials: "include" })
+      user.value = null
+      toast.success("User deleted successfully")
+    }
+    catch (err: any) {
+      const message = getErrorMessage(err, "Failed to delete user")
+      toast.error(message)
+      console.error("deleteUser error:", err)
+      throw err
+    }
+    finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    user,
+    loading,
+    getUser,
+    deleteUser,
+  }
+})

package/templates/base/app/utils/helpers.ts

@@ -0,0 +1,42 @@
+/**
+ * Returns a formatted date string or a placeholder if the date is null/undefined.
+ */
+export function formatDate(date?: string | Date | null): string {
+  if (!date) {
+    return "-"
+  }
+
+  const dt = typeof date === "string" ? new Date(date) : date
+  const formatted = dt.toLocaleDateString("en-US", {
+    year: "2-digit",
+    month: "short",
+    day: "numeric",
+  })
+
+  return formatted.charAt(0).toLowerCase() + formatted.slice(1)
+}
+
+/**
+ * Extracts the error message from various error formats (Nuxt/H3/Zod).
+ */
+export function getErrorMessage(err: any, fallback: string): string {
+  return err?.data?.statusMessage || err?.data?.message || err?.statusMessage || err?.message || fallback
+}
+
+/**
+ * Signs in the user by redirecting to the provider's authentication endpoint.
+ */
+export function signIn(provider: string) {
+  navigateTo(`/api/auth/${provider}`, { external: true })
+}
+
+/**
+  Signs out the current user by calling the logout endpoint and clearing the session.
+ */
+export async function signOut() {
+  const { clear } = useUserSession()
+
+  await $fetch("/api/auth/logout", { method: "POST", credentials: "include" })
+  await clear()
+  await navigateTo("/")
+}

package/templates/base/eslint.config.ts

@@ -0,0 +1,74 @@
+import antfu from "@antfu/eslint-config"
+import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss"
+
+export default antfu({
+  vue: true,
+  typescript: true,
+  jsonc: true,
+  formatters: {
+    css: true,
+    html: true,
+    markdown: true,
+  },
+  stylistic: {
+    indent: 2,
+    quotes: "double",
+    semi: false,
+  },
+  plugins: {
+    "better-tailwindcss": eslintPluginBetterTailwindcss,
+  },
+  settings: {
+    "better-tailwindcss": {
+      entryPoint: "app/assets/styles.css",
+      detectComponentClasses: true,
+    },
+  },
+  rules: {
+    "no-new": "off",
+    "no-undef": "off",
+    "no-alert": "off",
+    "no-console": "off",
+    "node/prefer-global/process": "off",
+    "curly": ["error", "all"],
+    "object-curly-newline": ["error", {
+      ObjectExpression: { multiline: false, consistent: true },
+      ObjectPattern: { multiline: false, consistent: true },
+      ImportDeclaration: { multiline: false, consistent: true },
+      ExportDeclaration: { multiline: false, consistent: true },
+    }],
+    "vue/object-curly-newline": ["error", {
+      ObjectExpression: { multiline: false, consistent: true },
+      ObjectPattern: { multiline: false, consistent: true },
+      ImportDeclaration: { multiline: false, consistent: true },
+      ExportDeclaration: { multiline: false, consistent: true },
+    }],
+    "vue/block-order": ["error", {
+      order: ["template", "script", "style"],
+    }],
+    "vue/define-macros-order": ["error", {
+      order: ["defineProps", "defineEmits"],
+    }],
+    "vue/singleline-html-element-content-newline": ["error", {
+      ignoreWhenEmpty: true,
+      ignoreWhenNoAttributes: true,
+    }],
+    "vue/multiline-html-element-content-newline": ["error", {
+      ignoreWhenEmpty: true,
+      allowEmptyLines: false,
+    }],
+    "vue/html-closing-bracket-newline": ["error", {
+      singleline: "never",
+      multiline: "always",
+      selfClosingTag: { singleline: "never", multiline: "always" },
+    }],
+    "vue/max-attributes-per-line": ["warn", {
+      singleline: { max: 4 },
+      multiline: { max: 2 },
+    }],
+    ...eslintPluginBetterTailwindcss.configs["recommended-warn"].rules,
+    "better-tailwindcss/no-unregistered-classes": "off",
+    "better-tailwindcss/no-unknown-classes": "off",
+    "better-tailwindcss/enforce-consistent-line-wrapping": "off",
+  },
+})

package/templates/base/nuxt.config.ts

@@ -0,0 +1,39 @@
+import tailwindcss from "@tailwindcss/vite"
+
+export default defineNuxtConfig({
+  modules: [
+    "@nuxt/fonts",
+    "@nuxt/icon",
+    "@nuxtjs/color-mode",
+    "@nuxtjs/seo",
+    "@pinia/nuxt",
+    "nuxt-auth-utils",
+  ],
+  runtimeConfig: {
+    public: {
+      baseUrl: process.env.NUXT_PUBLIC_BASE_URL,
+    },
+  },
+  nitro: {
+    externals: {
+      inline: ["unhead"],
+    },
+  },
+  vite: {
+    plugins: [tailwindcss() as any],
+  },
+  css: ["~/assets/styles.css"],
+  site: {
+    url: process.env.NUXT_PUBLIC_BASE_URL,
+  },
+  colorMode: {
+    classSuffix: "",
+    preference: "system",
+    fallback: "light",
+    storageKey: "nuxt-color-mode",
+  },
+  icon: {
+    mode: "svg",
+    clientBundle: { scan: true },
+  },
+})

package/templates/base/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "my-nuxt-app",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "postinstall": "prisma generate && nuxt prepare",
+    "typecheck": "nuxt typecheck",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "db:generate": "prisma generate",
+    "db:push": "prisma db push",
+    "db:migrate": "prisma migrate dev"
+  },
+  "dependencies": {
+    "@nuxt/fonts": "0.14.0",
+    "@nuxt/icon": "2.2.1",
+    "@nuxtjs/color-mode": "4.0.0",
+    "@nuxtjs/seo": "3.4.0",
+    "@pinia/nuxt": "0.11.3",
+    "@prisma/adapter-pg": "7.4.0",
+    "@prisma/client": "7.4.0",
+    "@tailwindcss/vite": "4.2.1",
+    "dotenv": "17.3.1",
+    "nuxt": "4.3.1",
+    "nuxt-auth-utils": "0.5.29",
+    "pg": "8.18.0",
+    "tailwindcss": "4.2.1"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "7.5.0",
+    "eslint": "10.0.0",
+    "eslint-plugin-better-tailwindcss": "4.3.0",
+    "eslint-plugin-format": "2.0.0",
+    "prisma": "7.4.0",
+    "typescript": "5.9.3"
+  }
+}

package/templates/base/prisma/schema.prisma

@@ -0,0 +1,30 @@
+generator client {
+  provider = "prisma-client"
+  output   = "../.data/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+}
+
+model User {
+  id        String    @id @default(cuid())
+  email     String    @unique
+  name      String
+  image     String?
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  accounts  Account[]
+}
+
+model Account {
+  id                String   @id @default(cuid())
+  userId            String
+  provider          String
+  providerAccountId String
+  createdAt         DateTime @default(now())
+  updatedAt         DateTime @updatedAt
+  user              User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([provider, providerAccountId])
+}

package/templates/base/prisma.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig, env } from "prisma/config"
+import "dotenv/config"
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  datasource: {
+    url: env("DATABASE_URL"),
+  },
+})