nuxt-bake 1.0.1

package/templates/base/server/api/auth/[provider].ts

@@ -0,0 +1,67 @@
+import type { EventHandlerRequest, H3Event } from "h3"
+
+const configs: Record<string, any> = {
+  google: {
+    clientId: process.env.NUXT_OAUTH_GOOGLE_CLIENT_ID,
+    clientSecret: process.env.NUXT_OAUTH_GOOGLE_CLIENT_SECRET,
+    redirectURL: `${process.env.NUXT_PUBLIC_BASE_URL}/api/auth/google`,
+  },
+  github: {
+    emailRequired: true,
+    clientId: process.env.NUXT_OAUTH_GITHUB_CLIENT_ID,
+    clientSecret: process.env.NUXT_OAUTH_GITHUB_CLIENT_SECRET,
+    redirectURL: `${process.env.NUXT_PUBLIC_BASE_URL}/api/auth/github`,
+  },
+}
+
+const extractUserData: Record<string, (user: any) => any> = {
+  google: user => ({
+    id: user.id?.toString() || user.sub?.toString(),
+    name: user.name || user.given_name,
+    email: user.email,
+    image: user.picture,
+  }),
+  github: user => ({
+    id: user.id?.toString(),
+    name: user.name,
+    email: user.email,
+    image: user.avatar_url,
+  }),
+}
+
+export default defineEventHandler(async (event: H3Event) => {
+  const provider = event.context.params?.provider
+  if (!provider || !configs[provider]) {
+    throw createError({ status: 400, message: "Unknown OAuth provider" })
+  }
+
+  try {
+    const oauthHandler = { google: defineOAuthGoogleEventHandler, github: defineOAuthGitHubEventHandler }[provider]
+    if (!oauthHandler) {
+      throw createError({ status: 400, message: `OAuth handler not found for provider: ${provider}` })
+    }
+
+    return await oauthHandler({ config: configs[provider], async onSuccess(event: H3Event<EventHandlerRequest>, { user }: any) {
+      if (!user || typeof user !== "object") {
+        throw createError({ status: 400, message: `Invalid user data from ${provider}` })
+      }
+
+      const extractor = extractUserData[provider]
+      if (!extractor) {
+        throw createError({ status: 400, message: `User data extractor not found for provider: ${provider}` })
+      }
+
+      const userData = extractor(user)
+      if (!userData.id || !userData.email) {
+        throw createError({ status: 400, message: `Missing required user data from ${provider}` })
+      }
+
+      return handleOAuthUser(event, { ...userData, provider })
+    }, async onError(event: H3Event<EventHandlerRequest>) {
+      return sendRedirect(event, `/sign-in?error=${provider}_oauth_failed`)
+    } })(event)
+  }
+  catch (err: any) {
+    throw createError({ status: 500, message: "OAuth processing failed", data: { provider, error: err instanceof Error ? err.message : String(err) } })
+  }
+})

package/templates/base/server/api/user/index.delete.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(async (event) => {
+  const user = await getUserFromSession(event)
+
+  await db.user.delete({ where: { id: user.id } })
+  await clearUserSession(event)
+
+  return { success: true, message: "User deleted successfully" }
+})

package/templates/base/server/api/user/index.get.ts

@@ -0,0 +1,10 @@
+export default defineEventHandler(async (event) => {
+  const user = await getUserFromSession(event)
+  if (!user) {
+    throw createError({ status: 404, message: "User not found" })
+  }
+
+  const userData = await db.user.findUnique({ where: { id: user.id } })
+
+  return { userData }
+})

package/templates/base/server/utils/auth.ts

@@ -0,0 +1,48 @@
+import type { H3Event } from "h3"
+
+export async function handleOAuthUser(event: H3Event, userData: OAuthUserData) {
+  const { id: providerAccountId, name, email, image, provider } = userData
+
+  // Find existing account by provider
+  let account = await db.account.findUnique({
+    where: { provider_providerAccountId: { provider, providerAccountId } },
+    include: { user: true },
+  })
+
+  let user: any = account?.user ?? null
+  if (!user) {
+    user = await db.user.findUnique({ where: { email } })
+  }
+
+  // If still no user, create one
+  if (!user) {
+    user = await db.user.create({
+      data: {
+        email,
+        name: name?.trim() || email.split("@")[0],
+        image: image || undefined,
+      },
+    })
+  }
+
+  // Upsert account
+  account = await db.account.upsert({
+    where: { provider_providerAccountId: { provider, providerAccountId } },
+    update: {},
+    create: { userId: user.id, provider, providerAccountId },
+    include: { user: true },
+  })
+
+  user = account.user
+
+  // Build session object
+  const sessionUser = {
+    id: user.id,
+    email: user.email,
+    name: user.name,
+    image: user.image ?? null,
+  }
+
+  await setUserSession(event, { user: sessionUser, loggedInAt: new Date() })
+  return sendRedirect(event, "/admin/profile")
+}

package/templates/base/server/utils/db.ts

@@ -0,0 +1,15 @@
+import { PrismaPg } from "@prisma/adapter-pg"
+import dotenv from "dotenv"
+import { PrismaClient } from "../../.data/prisma/client"
+
+dotenv.config()
+
+const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL })
+const db = new PrismaClient({ adapter })
+
+db.$connect().catch((err) => {
+  console.error("Failed to connect to database:", err)
+  process.exit(1)
+})
+
+export default db

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

@@ -0,0 +1,14 @@
+import type { EventHandlerRequest, H3Event } from "h3"
+
+/**
+ * Retrieves the authenticated user from the current session.
+ * Throws 401 if no valid session exists.
+ */
+export async function getUserFromSession(event: H3Event<EventHandlerRequest>) {
+  const session = await getUserSession(event)
+  if (!session?.user?.id) {
+    throw createError({ status: 401, statusText: "Unauthorized" })
+  }
+
+  return session.user
+}

package/templates/base/shared/types/auth.d.ts

@@ -0,0 +1,31 @@
+declare module "#auth-utils" {
+  interface User {
+    id: string
+    email: string
+    name: string
+    image?: string | null
+  }
+
+  interface UserSession {
+    user: User
+    loggedInAt: Date
+  }
+
+  interface Account {
+    id: string
+    userId: string
+    provider: string
+    providerAccountId: string
+    createdAt?: Date | string
+    updatedAt?: Date | string
+    user?: User
+  }
+}
+
+interface OAuthUserData {
+  id: string
+  email: string
+  name: string
+  image: string | null
+  provider: "google" | "github"
+}

package/templates/base/shared/types/globals.d.ts

@@ -0,0 +1,15 @@
+interface User {
+  id: string
+  name: string
+  email: string
+  image?: string | null
+  createdAt?: Date | string
+  updatedAt?: Date | string
+}
+
+interface Toast {
+  id: string
+  message: string
+  type: "success" | "error"
+  duration?: number
+}

package/templates/base/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ],
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": []
+}

package/templates/with-i18n/app/app.vue

@@ -0,0 +1,29 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+
+const { locale } = useI18n()
+const isLoading = ref(true)
+
+onMounted(() => {
+  const onLoad = () => (isLoading.value = false)
+  if (document.readyState === "complete") {
+    isLoading.value = false
+  }
+  else {
+    window.addEventListener("load", onLoad)
+    onBeforeUnmount(() => window.removeEventListener("load", onLoad))
+  }
+})
+
+useLocaleHead({ dir: true, seo: true })
+useHead({
+  htmlAttrs: { lang: computed(() => locale.value) },
+  link: [{ rel: "icon", href: "/favicon.svg" }],
+  meta: [{ name: "viewport", content: "width=device-width, initial-scale=1" },],
+})
+</script>

package/templates/with-i18n/app/components/navbar.vue

@@ -0,0 +1,74 @@
+<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">
+          {{ t('navbar.greeting', { name: userStore.user?.name }) }}
+        </p>
+        <button class="btn" @click="signOut">
+          {{ t('navbar.logout') }}
+        </button>
+      </div>
+
+      <div v-else class="flex flex-row items-center gap-2">
+        <p class="text-sm">
+          {{ t('navbar.unauthenticated') }}
+        </p>
+        <nuxt-link to="/sign-in" class="btn">
+          {{ t('navbar.signIn') }}
+        </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>
+
+      <button v-for="language in availableLocales" :key="language" class="cursor-pointer outline-none hover:underline" @click="() => setLanguage(language)">
+        {{ t(`locale.${language}`) }}
+      </button>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+const { t, locale, availableLocales } = useI18n()
+const { clear } = useUserSession()
+const { toggleTheme, themeIcon } = useTheme()
+const userStore = useUserStore()
+
+async function setLanguage(language: string) {
+  locale.value = language as "en-US" | "fr-FR"
+  localStorage.setItem("nuxt-lang", language)
+  await nextTick()
+}
+
+onMounted(async () => {
+  try {
+    await userStore.getUser()
+  }
+  catch (err: any) {
+    console.error("Failed to fetch user:", err)
+  }
+
+  const savedLang = localStorage.getItem("nuxt-lang")
+  if (savedLang && (savedLang === "en-US" || savedLang === "fr-FR")) {
+    locale.value = savedLang as "en-US" | "fr-FR"
+    await nextTick()
+  }
+})
+
+async function signOut() {
+  await clear()
+  return navigateTo("/")
+}
+</script>

package/templates/with-i18n/app/error.vue

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

package/templates/with-i18n/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 text-center">
+      <div class="flex flex-col items-center gap-2 text-center">
+        <icon name="simple-icons:nuxt" size="50" class="text-primary" />
+        <h1>
+          {{ t("index.header.title") }}
+        </h1>
+        <p>
+          {{ t("index.header.description") }}
+        </p>
+      </div>
+    </header>
+
+    <hr class="border-primary! w-4/5">
+
+    <div class="flex flex-col items-center gap-2">
+      <h2 class="text-lg font-semibold">
+        {{ t("index.features") }}
+      </h2>
+
+      <ul class="grid grid-cols-2 gap-4 md:grid-cols-4">
+        <li v-for="(feature, index) in features" :key="index" class="flex items-center gap-2 text-xs font-semibold md:text-sm">
+          <icon :name="feature.icon" size="20" class="text-primary" />
+          <span>{{ t(`index.featureList.${feature.key}`) }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+const features = [
+  { icon: "simple-icons:nuxtdotjs", key: "nuxt" },
+  { icon: "simple-icons:typescript", key: "typescript" },
+  { icon: "simple-icons:tailwindcss", key: "tailwind" },
+  { icon: "simple-icons:iconify", key: "icons" },
+  { icon: "ph:text-aa", key: "fonts" },
+  { icon: "icon-park-outline:pineapple", key: "pinia" },
+  { icon: "ph:translate", key: "i18n" },
+  { icon: "ph:lock-key-open", key: "oauth" },
+  { icon: "simple-icons:prisma", key: "prisma" },
+  { icon: "simple-icons:eslint", key: "eslint" },
+  { icon: "ph:magnifying-glass", key: "seo" },
+]
+
+useHead({
+  title: t("index.meta.title"),
+  meta: [{ name: "description", content: t("index.meta.description") }],
+})
+</script>

package/templates/with-i18n/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>{{ t("signIn.header") }}</h2>
+    </header>
+
+    <div class="my-4 flex flex-col items-center gap-4">
+      <p class="text-muted-foreground text-lg font-semibold">
+        {{ t("signIn.chooseProvider") }}
+      </p>
+      <div class="flex flex-row items-center gap-4">
+        <button
+          v-for="provider in providers" :key="provider.name"
+          class="btn" @click="navigateTo(`/api/auth/${provider.name}`, { external: true })"
+        >
+          <icon :name="provider.icon" size="25" />
+          <span>{{ t(`signIn.providers.${provider.name}`) }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+const providers = [
+  { name: "github", icon: "simple-icons:github" },
+  { name: "google", icon: "simple-icons:google" },
+]
+
+useSeoMeta({
+  title: t("signIn.meta.title"),
+  description: t("signIn.meta.description"),
+  ogTitle: t("signIn.meta.title"),
+  ogDescription: t("signIn.meta.description"),
+  robots: "noindex, nofollow",
+})
+</script>

package/templates/with-i18n/app/utils/i18n.config.ts

@@ -0,0 +1,14 @@
+import en from "~/utils/locales/en-US.json"
+import br from "~/utils/locales/fr-FR.json"
+
+export default defineI18nConfig(() => {
+  return {
+    legacy: false,
+    langDir: "./locales",
+    messages: { "en-US": en, "fr-FR": br },
+    locales: [
+      { code: "en-US", iso: "en-US" },
+      { code: "fr-FR", iso: "fr-FR" },
+    ],
+  }
+})

package/templates/with-i18n/app/utils/locales/en-US.json

@@ -0,0 +1,50 @@
+{
+  "locale.en-US": "EN",
+  "locale.fr-FR": "FR",
+  "index": {
+    "meta": {
+      "title": "Nuxt Bake",
+      "description": "If you're seeing this, it means you've successfully set up your Nuxt.js project via nuxt-bake."
+    },
+    "header": {
+      "title": "Nuxt Bake",
+      "description": "If you're seeing this, it means you've successfully set up your Nuxt.js project via nuxt-bake."
+    },
+    "features": "Features",
+    "featureList": {
+      "nuxt": "Nuxt 4",
+      "typescript": "TypeScript",
+      "tailwind": "Tailwind CSS 4",
+      "icons": "Nuxt Icons",
+      "fonts": "Google Fonts",
+      "pinia": "Pinia",
+      "i18n": "Nuxt i18n",
+      "oauth": "OAuth",
+      "prisma": "Prisma",
+      "eslint": "ESLint",
+      "seo": "SEO"
+    }
+  },
+  "signIn": {
+    "meta": {
+      "title": "Sign In",
+      "description": "Sign In page"
+    },
+    "header": "Sign In",
+    "chooseProvider": "Choose a provider to continue.",
+    "providers": {
+      "github": "Sign In With GitHub",
+      "google": "Sign In With Google"
+    }
+  },
+  "error": {
+    "unknown": "Unknown error",
+    "goHome": "Go back home"
+  },
+  "navbar": {
+    "greeting": "Hi",
+    "unauthenticated": "Unauthenticated",
+    "logout": "Logout",
+    "signIn": "Sign In"
+  }
+}

package/templates/with-i18n/app/utils/locales/fr-FR.json

@@ -0,0 +1,50 @@
+{
+  "locale.en-US": "EN",
+  "locale.fr-FR": "FR",
+  "index": {
+    "meta": {
+      "title": "Nuxt.js Départ",
+      "description": "Si vous voyez ceci, cela signifie que vous avez configuré avec succès votre projet Nuxt.js via nuxt-bake."
+    },
+    "header": {
+      "title": "Nuxt.js Départ",
+      "description": "Si vous voyez ceci, cela signifie que vous avez configuré avec succès votre projet Nuxt.js via nuxt-bake."
+    },
+    "features": "Fonctionnalités",
+    "featureList": {
+      "nuxt": "Nuxt 4",
+      "typescript": "TypeScript",
+      "tailwind": "Tailwind CSS 4",
+      "icons": "Nuxt Icons",
+      "fonts": "Google Fonts",
+      "pinia": "Pinia",
+      "i18n": "Nuxt i18n",
+      "oauth": "OAuth",
+      "prisma": "Prisma",
+      "eslint": "ESLint",
+      "seo": "SEO"
+    }
+  },
+  "signIn": {
+    "meta": {
+      "title": "Connexion",
+      "description": "Page de connexion"
+    },
+    "header": "Connexion",
+    "chooseProvider": "Choisissez un fournisseur pour continuer.",
+    "providers": {
+      "github": "Se connecter avec GitHub",
+      "google": "Se connecter avec Google"
+    }
+  },
+  "error": {
+    "unknown": "Erreur inconnue",
+    "goHome": "Retour à l'accueil"
+  },
+  "navbar": {
+    "greeting": "Salut",
+    "unauthenticated": "Non authentifié",
+    "logout": "Déconnexion",
+    "signIn": "Connexion"
+  }
+}

package/templates/with-i18n/nuxt.config.ts

@@ -0,0 +1,51 @@
+import tailwindcss from "@tailwindcss/vite"
+
+export default defineNuxtConfig({
+  modules: [
+    "@nuxt/fonts",
+    "@nuxt/icon",
+    "@nuxtjs/color-mode",
+    "@nuxtjs/i18n",
+    "@nuxtjs/seo",
+    "@pinia/nuxt",
+    "nuxt-auth-utils",
+  ],
+  runtimeConfig: {
+    public: {
+      baseUrl: process.env.NUXT_PUBLIC_BASE_URL,
+    },
+  },
+  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",
+  },
+  i18n: {
+    restructureDir: "app/utils",
+    baseUrl: process.env.NUXT_PUBLIC_BASE_URL,
+    locales: [
+      { code: "en-US", iso: "en-US", file: "en-US.json" },
+      { code: "fr-FR", iso: "fr-FR", file: "fr-FR.json" },
+    ],
+    defaultLocale: "en-US",
+    strategy: "no_prefix",
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: "nuxt-lang",
+      alwaysRedirect: true,
+      fallbackLocale: "en-US",
+    },
+  },
+  icon: {
+    mode: "svg",
+    clientBundle: { scan: true },
+  },
+})

package/templates/with-tests/app/pages/index.vue

@@ -0,0 +1,51 @@
+<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="border-primary! w-4/5">
+
+    <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-6">
+        <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 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:playwright", label: "Playwright" },
+  { icon: "simple-icons:vitest", label: "Vitest" },
+  { icon: "simple-icons:eslint", label: "ESLint" },
+]
+
+useHead({
+  title: "Home",
+  meta: [{ name: "description", content: "Home page." }],
+})
+</script>