From 660b09a1115b1cfbe568a027c7e6418ba933e498 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Wed, 11 Oct 2023 15:31:13 +0200
Subject: [PATCH 1/9] updated versions of all packages

---
 src/steps/2.addModules/moduleConfigs.ts | 31 +++++++++++++------------
 src/utils/addPackageDependency.ts       |  7 +++++-
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/steps/2.addModules/moduleConfigs.ts b/src/steps/2.addModules/moduleConfigs.ts
index 49e5231..e0e6dc9 100644
--- a/src/steps/2.addModules/moduleConfigs.ts
+++ b/src/steps/2.addModules/moduleConfigs.ts
@@ -206,7 +206,7 @@ const nuxtAuthExamplePage = `<template>
 <script setup lang="ts">
 definePageMeta({ middleware: 'auth' })
 
-const { data, signOut } = useSession()
+const { data, signOut } = useAuth()
 </script>
 `
 
@@ -359,12 +359,12 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
     dependencies: [
       {
         name: "prisma",
-        version: "^4.11.0",
+        version: "^5.4.1",
         isDev: true
       },
       {
         name: "@prisma/client",
-        version: "^4.11.0",
+        version: "^5.4.1",
         isDev: false
       }
     ],
@@ -407,17 +407,18 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
     dependencies: [
       {
         name: "@sidebase/nuxt-auth",
-        version: "^0.4.4",
+        version: "^0.6.0-beta.6",
         isDev: true
       },
       {
         name: "next-auth",
-        version: "^4.18.8",
-        isDev: false
+        version: "4.21.1",
+        isDev: false,
+        isPeer: true
       }
     ],
     nuxtConfig: {
-      modules: ["@sidebase/nuxt-auth"]
+      modules: ["@sidebase/nuxt-auth"],
     },
     files: [{
       path: "server/api/auth/[...].ts",
@@ -444,19 +445,19 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
     description: "Build end-to-end typesafe APIs in Nuxt applications. See more: https://trpc.io/",
     dependencies: [{
       name: "@trpc/server",
-      version: "^10.12.0",
+      version: "^10.40.0",
       isDev: false
     }, {
       name: "@trpc/client",
-      version: "^10.12.0",
+      version: "^10.40.0",
       isDev: false
     }, {
       name: "trpc-nuxt",
-      version: "^0.7.0",
+      version: "^0.10.12",
       isDev: false
     }, {
       name: "zod",
-      version: "^3.21.2",
+      version: "^3.22.4",
       isDev: false
     }, {
       name: "superjson",
@@ -509,7 +510,7 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
     description: "A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. See more: https://tailwindcss.com/",
     dependencies: [{
       name: "@nuxtjs/tailwindcss",
-      version: "^6.4.0",
+      version: "^6.8.0",
       isDev: true
     }],
     nuxtConfig: {
@@ -529,12 +530,12 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
     humanReadableName: "Naive UI",
     description: "A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast. See more: https://www.naiveui.com/",
     dependencies: [{
-      name: "@huntersofbook/naive-ui-nuxt",
-      version: "^0.7.1",
+      name: "@bg-dev/nuxt-naiveui",
+      version: "^1.5.1",
       isDev: true
     }],
     nuxtConfig: {
-      modules: ["@huntersofbook/naive-ui-nuxt"],
+      modules: ["@bg-dev/nuxt-naiveui"],
     },
     files: [],
     tasksPostInstall: [],
diff --git a/src/utils/addPackageDependency.ts b/src/utils/addPackageDependency.ts
index d6efd14..22aa0ec 100644
--- a/src/utils/addPackageDependency.ts
+++ b/src/utils/addPackageDependency.ts
@@ -6,6 +6,7 @@ export interface Dependency {
   name: string
   version: string
   isDev: boolean
+  isPeer?: boolean
 }
 
 export const addPackageDependencies = async (opts: {
@@ -17,11 +18,15 @@ export const addPackageDependencies = async (opts: {
   const pathToPackageJson = resolve(`./${projectDir}/package.json`)
   const packageJson = await readPackageJSON(pathToPackageJson)
 
-  for (const { name, version, isDev } of dependencies) {
+  for (const { name, version, isDev, isPeer } of dependencies) {
     if (isDev) {
       packageJson.devDependencies = defu(packageJson.devDependencies, {
         [name]: version
       })
+    } else if (isPeer) {
+      packageJson.peerDependencies = defu(packageJson.peerDependencies, {
+        [name]: version
+      })
     } else {
       packageJson.dependencies = defu(packageJson.dependencies, {
         [name]: version

From e3d626b52616df28a4ac2c10f7dacd48390631ae Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 12 Oct 2023 14:34:45 +0200
Subject: [PATCH 2/9] updated index vue file

---
 src/steps/2.addModules/generateIndexVue.ts | 249 +++++++++++++--------
 1 file changed, 159 insertions(+), 90 deletions(-)

diff --git a/src/steps/2.addModules/generateIndexVue.ts b/src/steps/2.addModules/generateIndexVue.ts
index 961a755..ef1e313 100644
--- a/src/steps/2.addModules/generateIndexVue.ts
+++ b/src/steps/2.addModules/generateIndexVue.ts
@@ -10,25 +10,44 @@ export const generateIndexVue = (selectedModules: Modules[]) => {
   const js = getModulesSnippet(selectedModules, "js")
 
   return `<template>
-  <div class="main-container">
-    <div class="heading">
-      <h1 class="heading__title">
-        Welcome to your new <span class="gradient__text">sidebase</span> app!
-      </h1>
-      <p class="heading__credits">
-        Read our documentation <a href="https://sidebase.io/sidebase/welcome" target="_blank">here</a>.
-        ${selectedModules.length > 0 ? "Get started in no time with the following amazing modules:" : "Add some of our amazing modules <a href='https://sidebase.io' target='_blank'>here</a>."}
-      </p>
+  <div class="wrapper">
+    <div class="margins" style="padding-top: 3rem; ">
+      <div class="content">
+        <h1 class="heading">
+          Welcome to your new <span class="gradient__text">sidebase</span> app!
+        </h1>
+        <p class="description">
+          Read our documentation <a class="hover-underline-animation" href="https://sidebase.io/sidebase/welcome" target="_blank">here</a>.
+          ${selectedModules.length > 0 ? "Get started in no time with the following amazing modules:" : "Add some of our amazing modules <a href='https://sidebase.io' target='_blank'>here</a>."}
+        </p>
+      </div>
+
+      <div class="modules_grid">
+      </div>
     </div>
-    <div class="cards">${html}
+
+    <div class="margins footer">
+      <div style="color: #D1D5DB">
+        Developed with love by
+        <NuxtLink href="https://sidestream.tech" target="_blank" class="hover-underline-animation">
+          Sidestream
+        </NuxtLink>
+      </div>
+      <div class="social">
+        <NuxtLink href="https://discord.gg/VzABbVsqAc" target="_blank" class="hover-underline-animation">
+          Discord
+        </NuxtLink>
+        <NuxtLink href="https://twitter.com/sidebase_io" target="_blank" class="hover-underline-animation">
+          Twitter
+        </NuxtLink>
+        <NuxtLink href="https://github.com/sidebase" target="_blank" class="hover-underline-animation">
+          Github
+        </NuxtLink>
+      </div>
     </div>
   </div>
 </template>
-${js && `
-<script>
-${js}
-</script>\n`}
-<style scoped>
+<style>
   * {
     margin: 0;
     padding: 0;
@@ -42,116 +61,166 @@ ${js}
     color: #484848;
   }
 
-  .main-container {
-    max-width: 45vw;
-    margin: auto;
-    padding-top: 60px;
-  }
-
-  /* HEADING */
-
-  .heading {
-    text-align: center;
+  /* Layout */
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 100vh;
+    color: #ffffff;
+    background-color: #0E0E10;
   }
+  .margins {
+    padding-left: 1rem;
+    padding-right: 1rem;
 
-  .heading__title {
-    font-weight: 600;
-    font-size: 40px;
+    @media (min-width: 1024px) {
+      padding-left: 5rem;
+      padding-right: 5rem;
+    }
   }
 
-  .gradient__text {
-    background: linear-gradient(to right, #7bceb6 10%, #12a87b 40%, #0FCF97 60%, #7bceb6 90%);
-    background-size: 200% auto;
-    color: #000;
-    background-clip: text;
-    text-fill-color: transparent;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    animation: shine 1s linear infinite;
+  /* Heading */
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
   }
+  .content .heading {
+    font-size: 2.4rem;
+    line-height: 2.25rem;
+    font-weight: 700;
 
-  @keyframes shine {
-    to {
-        background-position: 200% center;
+    @media (min-width: 1280px) {
+      font-size: 3rem;
+      line-height: 1;
     }
   }
 
-  .heading__credits {
-    color: #888888;
-    font-size: 25px;
-    transition: all 0.5s;
-  }
+  .content .description {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    color: #9CA3AF;
 
-  .heading__credits a {
-    text-decoration: underline;
+    @media (min-width: 1280px) {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
   }
 
-  /* CARDS */
-  .cards {
+  /* Modules */
+  .modules_grid {
     display: grid;
-    gap: 20px;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    margin-top: 30px;
-  }
+    margin-top: 2.5rem;
+    gap: 2rem;
 
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    @media (min-width: 1280px) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .card {
-    padding: 20px;
-    width: 100%;
-    min-height: 200px;
-    display: grid;
-    grid-template-rows: 20px 50px 1fr 50px;
+    position: relative;
+    padding: 30px;
     border-radius: 10px;
-    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
-    transition: all 0.2s;
-    cursor: default;
+    transition: 0.5s;
+    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
+    inset -5px -5px 15px rgba(255, 255, 255, 0.1),
+    5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
   }
 
-  .card:hover {
-    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
-    transform: scale(1.01);
+  .card .layout {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    justify-content: space-between;
+    height: 100%;
   }
 
-  .card__link {
-    position: relative;
-    text-decoration: underline;
-    color: rgba(255, 255, 255, 0.9);
+  .card .layout .group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
   }
 
-  .card__title {
-    font-weight: 400;
-    color: #ffffff;
-    font-size: 30px;
+  .card .layout .heading {
+    font-size: 1.5rem;
+    line-height: 2rem;
+    font-weight: 700;
   }
 
-  .card__body {
-    grid-row: 2/4;
+  .card .layout .description {
+    color: #D1D5DB;
   }
 
-  .card__body p {
-    color: #ffffff;
+  .card .layout .group .actions {
+    display: flex;
+    gap: 0.5rem;
   }
 
-  .card__action {
-    grid-row: 5/6;
-    align-self: center;
+  /* Footer */
+  .footer {
     display: flex;
-    gap: 20px
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    margin-top: 2.5rem;
+    justify-content: space-between;
+    align-items: center;
+    border-top-width: 1px;
+    border-color: #1F2937;
+    width: 100%;
   }
 
-  /* RESPONSIVE */
+  .footer .social {
+    display: flex;
+    gap: 1.25rem;
+    align-items: center;
+  }
 
-  @media (max-width: 1600px) {
-    .main-container {
-        max-width: 100vw;
-        padding: 50px;
-    }
+  /* Special */
+  .gradient__text {
+    background: linear-gradient(to right, #7bceb6 10%, #12a87b 40%, #0FCF97 60%, #7bceb6 90%);
+    background-size: 200% auto;
+    color: #000;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shine 1s linear infinite;
+  }
 
-    .cards {
-        justify-content: center;
-        grid-template-columns: repeat(1, minmax(0, 1fr));
+  @keyframes shine {
+    to {
+      background-position: 200% center;
     }
   }
-${css}
+  .hover-underline-animation {
+    display: inline-block;
+    position: relative;
+    color: #5BF3C7;
+    text-decoration: none;
+  }
+
+  .hover-underline-animation::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #5BF3C7;
+    transform-origin: bottom right;
+    transition: transform 0.25s ease-out;
+  }
+
+  .hover-underline-animation:hover::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+  }
 </style>
 `
 }

From b0f2fdc4dc9dacc189ebc9f505e732da6b527fb2 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 12 Oct 2023 15:36:03 +0200
Subject: [PATCH 3/9] made new welcome page

---
 src/steps/2.addModules/generateIndexVue.ts    |   4 +-
 .../2.addModules/generateModuleComponents.ts  |  85 +++
 src/steps/2.addModules/index.ts               |   7 +
 src/steps/2.addModules/moduleConfigs.ts       | 536 +-----------------
 src/steps/2.addModules/moduleConfigs/auth.ts  | 114 ++++
 .../2.addModules/moduleConfigs/naiveui.ts     |  48 ++
 .../2.addModules/moduleConfigs/prisma.ts      | 160 ++++++
 .../2.addModules/moduleConfigs/tailwind.ts    |  39 ++
 src/steps/2.addModules/moduleConfigs/trpc.ts  | 205 +++++++
 9 files changed, 671 insertions(+), 527 deletions(-)
 create mode 100644 src/steps/2.addModules/generateModuleComponents.ts
 create mode 100644 src/steps/2.addModules/moduleConfigs/auth.ts
 create mode 100644 src/steps/2.addModules/moduleConfigs/naiveui.ts
 create mode 100644 src/steps/2.addModules/moduleConfigs/prisma.ts
 create mode 100644 src/steps/2.addModules/moduleConfigs/tailwind.ts
 create mode 100644 src/steps/2.addModules/moduleConfigs/trpc.ts

diff --git a/src/steps/2.addModules/generateIndexVue.ts b/src/steps/2.addModules/generateIndexVue.ts
index ef1e313..e212b10 100644
--- a/src/steps/2.addModules/generateIndexVue.ts
+++ b/src/steps/2.addModules/generateIndexVue.ts
@@ -6,8 +6,6 @@ const getModulesSnippet = (selectedModules: Modules[], key: "html" | "css" | "js
 }
 export const generateIndexVue = (selectedModules: Modules[]) => {
   const html = getModulesSnippet(selectedModules, "html")
-  const css = getModulesSnippet(selectedModules, "css")
-  const js = getModulesSnippet(selectedModules, "js")
 
   return `<template>
   <div class="wrapper">
@@ -22,7 +20,7 @@ export const generateIndexVue = (selectedModules: Modules[]) => {
         </p>
       </div>
 
-      <div class="modules_grid">
+      <div class="modules_grid">${html}
       </div>
     </div>
 
diff --git a/src/steps/2.addModules/generateModuleComponents.ts b/src/steps/2.addModules/generateModuleComponents.ts
new file mode 100644
index 0000000..190f8b4
--- /dev/null
+++ b/src/steps/2.addModules/generateModuleComponents.ts
@@ -0,0 +1,85 @@
+export function generateModuleHTMLComponent (
+  title: string,
+  description: string,
+  documentationLink: string,
+  demo: string,
+  actions: string
+): {html: string} {
+  const html = `  <div class="layout">
+        <div class="group">
+          <h1 class="heading">
+            ${title}
+          </h1>
+          <p class="description">
+            ${description}
+          </p>
+        </div>
+        <div class="group">${demo}
+          <div class="actions">
+            <WelcomeButtonLink href="${documentationLink}" :blank="true">
+              Documentation
+            </WelcomeButtonLink>
+            ${actions}
+          </div>
+        </div>
+      </div>`
+  return {
+    html,
+  }
+}
+
+export function generateModuleHTMLSnippet (componentName: string) {
+  const html = `  <div class="card">
+        <${componentName} />
+      </div>`
+  return {
+    html,
+  }
+}
+
+export const buttonLink = `<script setup lang="ts">
+defineProps({
+  blank: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  href: {
+    type: String,
+    default: ''
+  },
+})
+</script>
+
+<template>
+  <NuxtLink class="ButtonLink" :to="href" :target="blank ? '_blank' : undefined">
+    <slot />
+  </NuxtLink>
+</template>
+
+<style scoped>
+.ButtonLink {
+  position: relative;
+  padding: 5px 15px;
+  color: white;
+  background-image: linear-gradient(160deg, #059669, #059669);
+  border-radius: 0.3rem;
+  cursor: pointer;
+  user-select: none;
+  transition: box-shadow 0.6s;
+}
+.ButtonLink:hover {
+  box-shadow: 0 0 60px 2px #059669, 0.5rem 0.5rem 30px #059669;
+}
+.ButtonLink:after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  left: 2px;
+  border-radius: 0.75rem;
+  pointer-events: none;
+}
+</style>
+`
diff --git a/src/steps/2.addModules/index.ts b/src/steps/2.addModules/index.ts
index 1a57d0b..a14aded 100644
--- a/src/steps/2.addModules/index.ts
+++ b/src/steps/2.addModules/index.ts
@@ -8,6 +8,7 @@ import { NuxtConfig } from "@nuxt/schema"
 import defu from "defu"
 import { inspect } from "node:util"
 import { generateIndexVue } from "./generateIndexVue"
+import { buttonLink } from "./generateModuleComponents"
 
 export default async (preferences: Preferences, templateDir: string) => {
   const selectedModules: Modules[] = preferences.addModules || []
@@ -64,4 +65,10 @@ export default defineNuxtConfig(${inspect(nuxtConfig, { compact: false })})
   const nuxtPagesIndexVue = generateIndexVue(selectedModules)
   await mkdir(resolver("pages"), { recursive: true })
   await writeFile(resolver("pages/index.vue"), nuxtPagesIndexVue)
+
+  // 7. Write ButtonLink.vue for the module components
+  if (selectedModules.length > 0) {
+    await mkdir(resolver("components/Welcome"), { recursive: true })
+    await writeFile(resolver("components/Welcome/ButtonLink.vue"), buttonLink)
+  }
 }
diff --git a/src/steps/2.addModules/moduleConfigs.ts b/src/steps/2.addModules/moduleConfigs.ts
index e0e6dc9..b23a5ff 100644
--- a/src/steps/2.addModules/moduleConfigs.ts
+++ b/src/steps/2.addModules/moduleConfigs.ts
@@ -1,342 +1,19 @@
 import { NuxtConfig } from "@nuxt/schema"
 import { Dependency } from "../../utils/addPackageDependency"
 
-const generateModuleHTMLSnippet = (
-  title: string,
-  description: string,
-  cardClass: string,
-  styles: string,
-  documentationLink: string,
-  exampleLink?: string
-): {html: string, css: string} => {
-  const html = `  <div class="card ${cardClass}">
-        <div class="card__body">
-          <h2 class="card__title">
-            ${title}
-          </h2>
-          <p>
-            ${description}
-          </p>
-        </div>
-        ${exampleLink ? (
-    `<p class="card__action">
-          <a class="card__link" href="${documentationLink}" target="_blank">
-            Read documentation
-          </a>
-          <a class="card__link" href="${exampleLink}" target="_blank">
-            See example
-          </a>
-        </p>`
-  ) : (
-    `<p class="card__action">
-          <a class="card__link" href="${documentationLink}" target="_blank">
-            Read documentation
-          </a>
-        </p>`
-  )}
-      </div>`
-  const css = `.${cardClass} { ${styles} }`
-  return {
-    html,
-    css
-  }
-}
-
-/**
- * PRISMA FILE CONTENTS
- */
-const prismaFile = `// This is your Prisma schema file,
-// learn more about it in the docs: https://pris.ly/d/prisma-schema
-
-generator client {
-  provider = "prisma-client-js"
-}
-
-datasource db {
-  // NOTE: You probably want to change this to another database later on
-  provider = "sqlite"
-
-  // This value is read from the .env file.
-  url      = env("DATABASE_URL")
-}
-
-model Example {
-  id          String @id @default(uuid())
-  details     String
-}
-`
-
-const prismaEnvFile = `# Prisma
-DATABASE_URL=file:./db.sqlite
-`
-
-const prismaExampleEndpoint = `/**
- * Fetch all \`examples\` from the database. Run \`npx prisma db push\` at least once for this to work.
- *
- * If you are using \`tRPC\` you can access the prisma-client by adding it to the context:
- * \`\`\`ts
- * export async function createContext(event: H3Event) {
- *   return { prisma: event.context.prisma }
- * }
- *
- * export type Context = inferAsyncReturnType<typeof createContext>
- * \`\`\`
- */
-export default defineEventHandler(event => event.context.prisma.example.findMany())
-`
-
-const prismaServerMiddleware = `import { PrismaClient } from '@prisma/client'
-
-let prisma: PrismaClient
-
-declare module 'h3' {
-  interface H3EventContext {
-    prisma: PrismaClient
-  }
-}
-
-export default eventHandler((event) => {
-  if (!prisma) {
-    prisma = new PrismaClient()
-  }
-  event.context.prisma = prisma
-})
-`
-
-const prismaUtils = `import { execSync } from 'child_process'
-
-/**
- * Helper to reset the database via a programmatic prisma invocation. Helpful to add to \`beforeEach\` or \`beforeAll\` of your testing setup.
- *
- * WARNING: Never run this in production.
- *
- * Taken from https://github.com/prisma/prisma/issues/13549#issuecomment-1144883246
- *
- * @param databaseUrl Connection URL to database. Inferred from \`process.env.DATABASE_URL\` if not provided
- */
-export const resetDatabase = (databaseUrl?: string) => {
-  const url = databaseUrl || process.env.DATABASE_URL
-  if (!url) {
-    throw new Error('Cannot reset database - connection string could not be inferred.')
-  }
-
-  if (process.env.NODE_ENV === 'production') {
-    throw new Error('This utility should not be called in production. It is meant for testing and development')
-  }
-
-  execSync(\`cd \${process.cwd()} && DATABASE_URL=\${url} npx prisma db push --force-reset\`, { stdio: 'inherit' })
-}
-`
-
-const prismaExamplePage = `<script setup lang="ts">
-const { data: examples } = useFetch('/api/examples')
-</script>
-
-<template>
-  <div>
-    Prisma ORM Data from the database, received {{ examples?.length || 0 }} records: <pre>{{ examples }}</pre>
-  </div>
-</template>
-`
-
-/**
- * NUXT AUTH FILE CONTENTS, from: sidebase.io/nuxt-auth/
- */
-const nuxtAuthServerFile = `import CredentialsProvider from 'next-auth/providers/credentials'
-import GithubProvider from 'next-auth/providers/github'
-import { NuxtAuthHandler } from '#auth'
-
-export default NuxtAuthHandler({
-  // TODO: SET A STRONG SECRET, SEE https://sidebase.io/nuxt-auth/configuration/nuxt-auth-handler#secret
-  secret: process.env.AUTH_SECRET,
-  // TODO: ADD YOUR OWN AUTHENTICATION PROVIDER HERE, READ THE DOCS FOR MORE: https://sidebase.io/nuxt-auth
-  providers: [
-    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
-    GithubProvider.default({
-      clientId: process.env.GITHUB_CLIENT_ID || 'enter-your-client-id-here',
-      clientSecret: process.env.GITHUB_CLIENT_SECRET || 'enter-your-client-secret-here' // TODO: Replace this with an env var like "process.env.GITHUB_CLIENT_SECRET". The secret should never end up in your github repository
-    }),
-    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
-    CredentialsProvider.default({
-      // The name to display on the sign in form (e.g. 'Sign in with...')
-      name: 'Credentials',
-      // The credentials is used to generate a suitable form on the sign in page.
-      // You can specify whatever fields you are expecting to be submitted.
-      // e.g. domain, username, password, 2FA token, etc.
-      // You can pass any HTML attribute to the <input> tag through the object.
-      credentials: {
-        username: { label: 'Username', type: 'text', placeholder: '(hint: jsmith)' },
-        password: { label: 'Password', type: 'password', placeholder: '(hint: hunter2)' }
-      },
-      authorize (credentials: any) {
-        console.warn('ATTENTION: You should replace this with your real providers or credential provider logic! The current setup is not safe')
-        // You need to provide your own logic here that takes the credentials
-        // submitted and returns either a object representing a user or value
-        // that is false/null if the credentials are invalid.
-        // NOTE: THE BELOW LOGIC IS NOT SAFE OR PROPER FOR AUTHENTICATION!
-
-        const user = { id: '1', name: 'J Smith', username: 'jsmith', password: 'hunter2' }
-
-        if (credentials?.username === user.username && credentials?.password === user.password) {
-          // Any object returned will be saved in \`user\` property of the JWT
-          return user
-        } else {
-          console.error('Warning: Malicious login attempt registered, bad credentials provided')
-
-          // If you return null then an error will be displayed advising the user to check their details.
-          return null
-
-          // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
-        }
-      }
-    })
-  ]
-})
-`
-
-const nuxtAuthExamplePage = `<template>
-  <div>
-    <div>I'm protected! Session data: {{ data }}</div>
-    <button class="rounded-xl shadow-xl p-2 m-2" @click="signOut()">
-      sign out
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({ middleware: 'auth' })
-
-const { data, signOut } = useAuth()
-</script>
-`
-
-/**
- * NUXT tRPC FILE CONTENTS, from: https://trpc-nuxt.vercel.app/get-started/usage/simple
- */
-const nuxtTrpcRootConfig = `/**
- * This is your entry point to setup the root configuration for tRPC on the server.
- * - \`initTRPC\` should only be used once per app.
- * - We export only the functionality that we use so we can enforce which base procedures should be used
- *
- * Learn how to create protected base procedures and other things below:
- * @see https://trpc.io/docs/v10/router
- * @see https://trpc.io/docs/v10/procedures
- */
-import { initTRPC } from '@trpc/server'
-import superjson from 'superjson'
-import { Context } from '~/server/trpc/context'
-
-const t = initTRPC.context<Context>().create({
-  transformer: superjson
-})
-
-/**
- * Unprotected procedure
- **/
-export const publicProcedure = t.procedure
-export const router = t.router
-export const middleware = t.middleware
-`
-
-const nuxtTrpcRoutersIndex = `import { z } from 'zod'
-import { publicProcedure, router } from '../trpc'
-
-export const appRouter = router({
-  hello: publicProcedure
-    .input(
-      z.object({
-        text: z.string().nullish()
-      })
-    )
-    .query(({ input }) => {
-      return {
-        greeting: \`hello \${input?.text ?? 'world'}\`,
-        time: new Date()
-      }
-    })
-})
-
-// export type definition of API
-export type AppRouter = typeof appRouter
-`
-
-const nuxtTrpcContext = `import { inferAsyncReturnType } from '@trpc/server'
-import type { H3Event } from 'h3'
-
-/**
- * Creates context for an incoming request
- * @link https://trpc.io/docs/context
- */
-export function createContext (_event: H3Event) {
-  /**
-   * Add any trpc-request context here. E.g., you could add \`prisma\` like this (if you've added it via sidebase):
-   * \`\`\`ts
-   * return { prisma: _event.context.prisma }
-   * \`\`\`
-   */
-  return {}
-}
-
-export type Context = inferAsyncReturnType<typeof createContext>
-`
-
-const nuxtTrpcApiHandler = `import { createNuxtApiHandler } from 'trpc-nuxt'
-import { appRouter } from '~/server/trpc/routers'
-import { createContext } from '~/server/trpc/context'
-
-// export API handler
-export default createNuxtApiHandler({
-  router: appRouter,
-  createContext
-})
-`
-
-const nuxtTrpcPlugin = `import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'
-import superjson from 'superjson'
-import type { AppRouter } from '~/server/trpc/routers'
-
-export default defineNuxtPlugin(() => {
-  /**
-   * createTRPCNuxtClient adds a \`useQuery\` composable
-   * built on top of \`useAsyncData\`.
-   */
-  const client = createTRPCNuxtClient<AppRouter>({
-    transformer: superjson,
-    links: [
-      httpBatchLink({
-        url: '/api/trpc'
-      })
-    ]
-  })
-
-  return {
-    provide: {
-      client
-    }
-  }
-})
-`
-
-const nuxtTrpcExamplePage = `<script setup lang="ts">
-const { $client } = useNuxtApp()
-
-const hello = await $client.hello.useQuery({ text: 'client' })
-</script>
-
-<template>
-  <div>
-    <!-- As \`superjson\` is already pre-configured, we can use \`time\` as a \`Date\` object without further deserialization 🎉 -->
-    tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
-  </div>
-</template>
-`
+// Import Module Configs
+import prisma from "./moduleConfigs/prisma"
+import auth from "./moduleConfigs/auth"
+import trpc from "./moduleConfigs/trpc"
+import tailwind from "./moduleConfigs/tailwind"
+import naiveui from "./moduleConfigs/naiveui"
 
 export declare interface File {
   path: string;
   content: string;
 }
 
-declare interface ModuleConfig {
+export declare interface ModuleConfig {
   humanReadableName: string
   description: string
   dependencies: Dependency[]
@@ -353,198 +30,9 @@ declare interface ModuleConfig {
 // TODO: Improve files approach: It will fail as soon as the content of a file depends on two dependencies at the same time!
 export type Modules = "prisma" | "auth" | "trpc" | "tailwind" | "naiveui"
 export const moduleConfigs: Record<Modules, ModuleConfig> = {
-  "prisma": {
-    humanReadableName: "Prisma ORM",
-    description: "Next-generation Node.js and TypeScript ORM. See more: https://www.prisma.io/",
-    dependencies: [
-      {
-        name: "prisma",
-        version: "^5.4.1",
-        isDev: true
-      },
-      {
-        name: "@prisma/client",
-        version: "^5.4.1",
-        isDev: false
-      }
-    ],
-    nuxtConfig: {},
-    files: [{
-      path: ".env",
-      content: prismaEnvFile
-    }, {
-      path: "prisma/schema.prisma",
-      content: prismaFile
-    }, {
-      path: "server/api/examples.get.ts",
-      content: prismaExampleEndpoint
-    }, {
-      path: "server/middleware/0.prisma.ts",
-      content: prismaServerMiddleware
-    }, {
-      path: "prisma/utils.ts",
-      content: prismaUtils
-    }, {
-      path: "pages/prisma.vue",
-      content: prismaExamplePage
-    }],
-    tasksPostInstall: [
-      "- [ ] Prisma: Edit your `prisma/prisma.schema` to your liking",
-      "- [ ] Prisma: Run `npx prisma db push` to sync the schema to your database & generate the Prisma Client",
-    ],
-    indexVue: generateModuleHTMLSnippet(
-      "Prisma ORM",
-      "Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.",
-      "prisma__card",
-      "background: radial-gradient(#3fbafe, #5A67D8FF);",
-      "https://sidebase.io/sidebase/components/prisma",
-      "/prisma"
-    ),
-  },
-  "auth": {
-    humanReadableName: "nuxt-auth",
-    description: "Authentication via OAuth, Credentials and magic email flows. Wraps the popular NextAuth.js with 12k stars. See more: https://sidebase.io/nuxt-auth",
-    dependencies: [
-      {
-        name: "@sidebase/nuxt-auth",
-        version: "^0.6.0-beta.6",
-        isDev: true
-      },
-      {
-        name: "next-auth",
-        version: "4.21.1",
-        isDev: false,
-        isPeer: true
-      }
-    ],
-    nuxtConfig: {
-      modules: ["@sidebase/nuxt-auth"],
-    },
-    files: [{
-      path: "server/api/auth/[...].ts",
-      content: nuxtAuthServerFile
-    }, {
-      path: "pages/protected.vue",
-      content: nuxtAuthExamplePage
-    }],
-    tasksPostInstall: [
-      "- [ ] Auth: Configure your auth providers to the [NuxtAuthHandler](./server/api/auth/[...].ts)",
-      "- [ ] Auth, optional: Enable global protection by setting `enableGlobalAppMiddleware: true` in [your nuxt.config.ts](./nuxt.config.ts). Delete the local middleware in the [protected.vue](./pages/protected.vue) page if you do"
-    ],
-    indexVue: generateModuleHTMLSnippet(
-      "Authentication",
-      "Nuxt user authentication and sessions through nuxt-auth. nuxt-auth wraps NextAuth.js to offer the reliability & convenience of a 12k star library to the nuxt 3 ecosystem with a native developer experience (DX)",
-      "auth__card",
-      "background: radial-gradient(#0FCF97, #0B9A71);",
-      "https://sidebase.io/nuxt-auth/getting-started",
-      "/protected"
-    ),
-  },
-  "trpc": {
-    humanReadableName: "tRPC 10",
-    description: "Build end-to-end typesafe APIs in Nuxt applications. See more: https://trpc.io/",
-    dependencies: [{
-      name: "@trpc/server",
-      version: "^10.40.0",
-      isDev: false
-    }, {
-      name: "@trpc/client",
-      version: "^10.40.0",
-      isDev: false
-    }, {
-      name: "trpc-nuxt",
-      version: "^0.10.12",
-      isDev: false
-    }, {
-      name: "zod",
-      version: "^3.22.4",
-      isDev: false
-    }, {
-      name: "superjson",
-      version: "^1.12.2",
-      isDev: false
-    }],
-    nuxtConfig: {
-      build: {
-        transpile: ["trpc-nuxt"]
-      }
-    },
-    files: [
-      {
-        path: "server/trpc/trpc.ts",
-        content: nuxtTrpcRootConfig
-      },
-      {
-        path: "server/trpc/routers/index.ts",
-        content: nuxtTrpcRoutersIndex
-      },
-      {
-        path: "server/trpc/context.ts",
-        content: nuxtTrpcContext
-      },
-      {
-        path: "server/api/trpc/[trpc].ts",
-        content: nuxtTrpcApiHandler
-      },
-      {
-        path: "plugins/trpcClient.ts",
-        content: nuxtTrpcPlugin
-      },
-      {
-        path: "pages/trpc.vue",
-        content: nuxtTrpcExamplePage
-      },
-    ],
-    tasksPostInstall: [],
-    indexVue: generateModuleHTMLSnippet(
-      "tRPC",
-      "tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.",
-      "trpc__card",
-      "background: radial-gradient(#a07ccf, #926dc2);",
-      "https://sidebase.io/sidebase/components/trpc",
-      "/trpc"
-    ),
-  },
-  "tailwind": {
-    humanReadableName: "Tailwind CSS",
-    description: "A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. See more: https://tailwindcss.com/",
-    dependencies: [{
-      name: "@nuxtjs/tailwindcss",
-      version: "^6.8.0",
-      isDev: true
-    }],
-    nuxtConfig: {
-      modules: ["@nuxtjs/tailwindcss"]
-    },
-    files: [],
-    tasksPostInstall: [],
-    indexVue: generateModuleHTMLSnippet(
-      "TailwindCSS",
-      "Rapidly build modern websites without ever leaving your HTML.",
-      "tailwind__card",
-      "background: radial-gradient(#7466e3, #5a4ad9);",
-      "https://sidebase.io/sidebase/components/tailwindcss",
-    ),
-  },
-  "naiveui": {
-    humanReadableName: "Naive UI",
-    description: "A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast. See more: https://www.naiveui.com/",
-    dependencies: [{
-      name: "@bg-dev/nuxt-naiveui",
-      version: "^1.5.1",
-      isDev: true
-    }],
-    nuxtConfig: {
-      modules: ["@bg-dev/nuxt-naiveui"],
-    },
-    files: [],
-    tasksPostInstall: [],
-    indexVue: generateModuleHTMLSnippet(
-      "NaiveUI",
-      "A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast.",
-      "naiveui__card",
-      "background: radial-gradient(#ad6434, #995020);",
-      "https://www.naiveui.com/en-US/os-theme",
-    ),
-  }
+  "prisma": prisma,
+  "auth": auth,
+  "trpc": trpc,
+  "tailwind": tailwind,
+  "naiveui": naiveui
 }
diff --git a/src/steps/2.addModules/moduleConfigs/auth.ts b/src/steps/2.addModules/moduleConfigs/auth.ts
new file mode 100644
index 0000000..7a96905
--- /dev/null
+++ b/src/steps/2.addModules/moduleConfigs/auth.ts
@@ -0,0 +1,114 @@
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
+import type { ModuleConfig } from "../moduleConfigs"
+
+const nuxtAuthServerFile = `import CredentialsProvider from 'next-auth/providers/credentials'
+import GithubProvider from 'next-auth/providers/github'
+import { NuxtAuthHandler } from '#auth'
+
+export default NuxtAuthHandler({
+  // TODO: SET A STRONG SECRET, SEE https://sidebase.io/nuxt-auth/configuration/nuxt-auth-handler#secret
+  secret: process.env.AUTH_SECRET,
+  // TODO: ADD YOUR OWN AUTHENTICATION PROVIDER HERE, READ THE DOCS FOR MORE: https://sidebase.io/nuxt-auth
+  providers: [
+    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
+    GithubProvider.default({
+      clientId: process.env.GITHUB_CLIENT_ID || 'enter-your-client-id-here',
+      clientSecret: process.env.GITHUB_CLIENT_SECRET || 'enter-your-client-secret-here' // TODO: Replace this with an env var like "process.env.GITHUB_CLIENT_SECRET". The secret should never end up in your github repository
+    }),
+    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
+    CredentialsProvider.default({
+      // The name to display on the sign in form (e.g. 'Sign in with...')
+      name: 'Credentials',
+      // The credentials is used to generate a suitable form on the sign in page.
+      // You can specify whatever fields you are expecting to be submitted.
+      // e.g. domain, username, password, 2FA token, etc.
+      // You can pass any HTML attribute to the <input> tag through the object.
+      credentials: {
+        username: { label: 'Username', type: 'text', placeholder: '(hint: jsmith)' },
+        password: { label: 'Password', type: 'password', placeholder: '(hint: hunter2)' }
+      },
+      authorize (credentials: any) {
+        console.warn('ATTENTION: You should replace this with your real providers or credential provider logic! The current setup is not safe')
+        // You need to provide your own logic here that takes the credentials
+        // submitted and returns either a object representing a user or value
+        // that is false/null if the credentials are invalid.
+        // NOTE: THE BELOW LOGIC IS NOT SAFE OR PROPER FOR AUTHENTICATION!
+
+        const user = { id: '1', name: 'J Smith', username: 'jsmith', password: 'hunter2' }
+
+        if (credentials?.username === user.username && credentials?.password === user.password) {
+          // Any object returned will be saved in \`user\` property of the JWT
+          return user
+        } else {
+          console.error('Warning: Malicious login attempt registered, bad credentials provided')
+
+          // If you return null then an error will be displayed advising the user to check their details.
+          return null
+
+          // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
+        }
+      }
+    })
+  ]
+})
+`
+
+const authDemoComponent = `<script lang="ts" setup>
+const { status, data, signIn, signOut } = useAuth()
+</script>
+<template>
+  ${generateModuleHTMLComponent(
+    "Authentication",
+    "Nuxt user authentication and sessions through nuxt-auth. nuxt-auth wraps NextAuth.js to offer the reliability & convenience of a 12k star library to the nuxt 3 ecosystem with a native developer experience (DX)",
+    "https://sidebase.io/nuxt-auth/getting-started",
+    `<p v-if="status === 'authenticated'">
+    Logged in as "{{ data?.user?.name }}"!
+    </p>
+    <p v-else>
+    Not logged in.
+    </p>
+    `,
+    `<WelcomeButtonLink v-if="status !== 'authenticated'" @click="signIn">
+    Sign in
+    </WelcomeButtonLink>
+    <WelcomeButtonLink v-else @click="signOut">
+    Sign out
+    </WelcomeButtonLink>`,
+  ).html}
+</template>
+`
+
+const auth: ModuleConfig = {
+  humanReadableName: "nuxt-auth",
+  description: "Authentication via OAuth, Credentials and magic email flows. Wraps the popular NextAuth.js with 12k stars. See more: https://sidebase.io/nuxt-auth",
+  dependencies: [
+    {
+      name: "@sidebase/nuxt-auth",
+      version: "^0.6.0-beta.6",
+      isDev: true
+    },
+    {
+      name: "next-auth",
+      version: "4.21.1",
+      isDev: false,
+      isPeer: true
+    }
+  ],
+  nuxtConfig: {
+    modules: ["@sidebase/nuxt-auth"],
+  },
+  files: [{
+    path: "server/api/auth/[...].ts",
+    content: nuxtAuthServerFile
+  },{
+    path: "components/Welcome/AuthDemo.vue",
+    content: authDemoComponent
+  }],
+  tasksPostInstall: [
+    "- [ ] Auth: Configure your auth providers to the [NuxtAuthHandler](./server/api/auth/[...].ts)",
+    "- [ ] Auth, optional: Enable global protection by setting `enableGlobalAppMiddleware: true` in [your nuxt.config.ts](./nuxt.config.ts). Delete the local middleware in the [protected.vue](./pages/protected.vue) page if you do"
+  ],
+  indexVue: generateModuleHTMLSnippet("WelcomeAuthDemo"),
+}
+
+export default auth
diff --git a/src/steps/2.addModules/moduleConfigs/naiveui.ts b/src/steps/2.addModules/moduleConfigs/naiveui.ts
new file mode 100644
index 0000000..fa556fb
--- /dev/null
+++ b/src/steps/2.addModules/moduleConfigs/naiveui.ts
@@ -0,0 +1,48 @@
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
+import type { ModuleConfig } from "../moduleConfigs"
+
+const naiveDemoComponent = `<script setup lang="ts">
+const showModal = ref(false)
+</script>
+<template>
+  ${generateModuleHTMLComponent(
+    "NaiveUI",
+    "A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast.",
+    "https://www.naiveui.com/en-US/os-theme",
+    `    <n-modal v-model:show="showModal">
+      <n-card
+        style="width: 600px"
+        title="NaiveUI + sidebase = ❤️"
+        role="dialog"
+        aria-modal="true"
+      >
+        Its this simple! You can now begin using any NaiveUI component in your project!
+      </n-card>
+    </n-modal>`,
+    `<WelcomeButtonLink @click="showModal = true">
+      Open modal
+    </WelcomeButtonLink>`,
+  ).html}
+</template>
+`
+
+const naiveui: ModuleConfig = {
+  humanReadableName: "Naive UI",
+  description: "A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast. See more: https://www.naiveui.com/",
+  dependencies: [{
+    name: "@bg-dev/nuxt-naiveui",
+    version: "^1.5.1",
+    isDev: true
+  }],
+  nuxtConfig: {
+    modules: ["@bg-dev/nuxt-naiveui"],
+  },
+  files: [{
+    path: "components/Welcome/NaiveDemo.vue",
+    content: naiveDemoComponent
+  }],
+  tasksPostInstall: [],
+  indexVue: generateModuleHTMLSnippet("WelcomeNaiveDemo"),
+}
+
+export default naiveui
diff --git a/src/steps/2.addModules/moduleConfigs/prisma.ts b/src/steps/2.addModules/moduleConfigs/prisma.ts
new file mode 100644
index 0000000..9a24b69
--- /dev/null
+++ b/src/steps/2.addModules/moduleConfigs/prisma.ts
@@ -0,0 +1,160 @@
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
+import type { ModuleConfig } from "../moduleConfigs"
+
+const prismaFile = `// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  // NOTE: You probably want to change this to another database later on
+  provider = "sqlite"
+
+  // This value is read from the .env file.
+  url      = env("DATABASE_URL")
+}
+
+model Example {
+  id          String @id @default(uuid())
+  details     String
+}
+`
+
+const prismaEnvFile = `# Prisma
+DATABASE_URL=file:./db.sqlite
+`
+
+const prismaExampleEndpoint = `/**
+ * Fetch all \`examples\` from the database. Run \`npx prisma db push\` at least once for this to work.
+ *
+ * If you are using \`tRPC\` you can access the prisma-client by adding it to the context:
+ * \`\`\`ts
+ * export async function createContext(event: H3Event) {
+ *   return { prisma: event.context.prisma }
+ * }
+ *
+ * export type Context = inferAsyncReturnType<typeof createContext>
+ * \`\`\`
+ */
+export default defineEventHandler(event => event.context.prisma.example.findMany())
+`
+
+const prismaServerMiddleware = `import { PrismaClient } from '@prisma/client'
+
+let prisma: PrismaClient
+
+declare module 'h3' {
+  interface H3EventContext {
+    prisma: PrismaClient
+  }
+}
+
+export default eventHandler((event) => {
+  if (!prisma) {
+    prisma = new PrismaClient()
+  }
+  event.context.prisma = prisma
+})
+`
+
+const prismaUtils = `import { execSync } from 'child_process'
+
+/**
+ * Helper to reset the database via a programmatic prisma invocation. Helpful to add to \`beforeEach\` or \`beforeAll\` of your testing setup.
+ *
+ * WARNING: Never run this in production.
+ *
+ * Taken from https://github.com/prisma/prisma/issues/13549#issuecomment-1144883246
+ *
+ * @param databaseUrl Connection URL to database. Inferred from \`process.env.DATABASE_URL\` if not provided
+ */
+export const resetDatabase = (databaseUrl?: string) => {
+  const url = databaseUrl || process.env.DATABASE_URL
+  if (!url) {
+    throw new Error('Cannot reset database - connection string could not be inferred.')
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    throw new Error('This utility should not be called in production. It is meant for testing and development')
+  }
+
+  execSync(\`cd \${process.cwd()} && DATABASE_URL=\${url} npx prisma db push --force-reset\`, { stdio: 'inherit' })
+}
+`
+
+const prismaExamplePage = `<script setup lang="ts">
+const { data: examples } = useFetch('/api/examples')
+</script>
+
+<template>
+  <div>
+    Prisma ORM Data from the database, received {{ examples?.length || 0 }} records: <pre>{{ examples }}</pre>
+  </div>
+</template>
+`
+
+const prismaDemoComponent = `<script lang="ts" setup>
+const { data: examples } = useFetch('/api/examples')
+</script>
+<template>
+  ${generateModuleHTMLComponent(
+    "Prisma ORM",
+    "Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.",
+    "https://sidebase.io/sidebase/components/prisma",
+    `<p>
+    Prisma ORM Data from the database, received {{ examples?.length || 0 }} records!
+    </p>
+    `,
+    "",
+  ).html}
+</template>
+`
+
+const prisma: ModuleConfig = {
+  humanReadableName: "Prisma ORM",
+  description: "Next-generation Node.js and TypeScript ORM. See more: https://www.prisma.io/",
+  dependencies: [
+    {
+      name: "prisma",
+      version: "^5.4.1",
+      isDev: true
+    },
+    {
+      name: "@prisma/client",
+      version: "^5.4.1",
+      isDev: false
+    }
+  ],
+  nuxtConfig: {},
+  files: [{
+    path: ".env",
+    content: prismaEnvFile
+  }, {
+    path: "prisma/schema.prisma",
+    content: prismaFile
+  }, {
+    path: "server/api/examples.get.ts",
+    content: prismaExampleEndpoint
+  }, {
+    path: "server/middleware/0.prisma.ts",
+    content: prismaServerMiddleware
+  }, {
+    path: "prisma/utils.ts",
+    content: prismaUtils
+  }, {
+    path: "pages/prisma.vue",
+    content: prismaExamplePage
+  },{
+    path: "components/Welcome/PrismaDemo.vue",
+    content: prismaDemoComponent,
+  }],
+  tasksPostInstall: [
+    "- [ ] Prisma: Edit your `prisma/prisma.schema` to your liking",
+    "- [ ] Prisma: Run `npx prisma db push` to sync the schema to your database & generate the Prisma Client",
+  ],
+  indexVue: generateModuleHTMLSnippet("WelcomePrismaDemo"),
+}
+
+export default prisma
diff --git a/src/steps/2.addModules/moduleConfigs/tailwind.ts b/src/steps/2.addModules/moduleConfigs/tailwind.ts
new file mode 100644
index 0000000..43eb5fb
--- /dev/null
+++ b/src/steps/2.addModules/moduleConfigs/tailwind.ts
@@ -0,0 +1,39 @@
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
+import type { ModuleConfig } from "../moduleConfigs"
+
+const tailwindDemoComponent = `<script lang="ts" setup>
+const { data: examples } = useFetch('/api/examples')
+</script>
+<template>
+  ${generateModuleHTMLComponent(
+    "TailwindCSS",
+    "Rapidly build modern websites without ever leaving your HTML.",
+    "https://sidebase.io/sidebase/components/tailwindcss",
+    "",
+    `<WelcomeButtonLink  href="/_tailwind/" :blank="true">
+    Tailwind viewer
+    </WelcomeButtonLink>`,
+  ).html}
+</template>
+`
+
+const tailwind: ModuleConfig = {
+  humanReadableName: "Tailwind CSS",
+  description: "A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. See more: https://tailwindcss.com/",
+  dependencies: [{
+    name: "@nuxtjs/tailwindcss",
+    version: "^6.8.0",
+    isDev: true
+  }],
+  nuxtConfig: {
+    modules: ["@nuxtjs/tailwindcss"]
+  },
+  files: [{
+    path: "components/Welcome/TailwindDemo.vue",
+    content: tailwindDemoComponent,
+  }],
+  tasksPostInstall: [],
+  indexVue: generateModuleHTMLSnippet("WelcomeTailwindDemo"),
+}
+
+export default tailwind
diff --git a/src/steps/2.addModules/moduleConfigs/trpc.ts b/src/steps/2.addModules/moduleConfigs/trpc.ts
new file mode 100644
index 0000000..bab3d5d
--- /dev/null
+++ b/src/steps/2.addModules/moduleConfigs/trpc.ts
@@ -0,0 +1,205 @@
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
+import type { ModuleConfig } from "../moduleConfigs"
+
+const nuxtTrpcRootConfig = `/**
+ * This is your entry point to setup the root configuration for tRPC on the server.
+ * - \`initTRPC\` should only be used once per app.
+ * - We export only the functionality that we use so we can enforce which base procedures should be used
+ *
+ * Learn how to create protected base procedures and other things below:
+ * @see https://trpc.io/docs/v10/router
+ * @see https://trpc.io/docs/v10/procedures
+ */
+import { initTRPC } from '@trpc/server'
+import superjson from 'superjson'
+import { Context } from '~/server/trpc/context'
+
+const t = initTRPC.context<Context>().create({
+  transformer: superjson
+})
+
+/**
+ * Unprotected procedure
+ **/
+export const publicProcedure = t.procedure
+export const router = t.router
+export const middleware = t.middleware
+`
+
+const nuxtTrpcRoutersIndex = `import { z } from 'zod'
+import { publicProcedure, router } from '../trpc'
+
+export const appRouter = router({
+  hello: publicProcedure
+    .input(
+      z.object({
+        text: z.string().nullish()
+      })
+    )
+    .query(({ input }) => {
+      return {
+        greeting: \`hello \${input?.text ?? 'world'}\`,
+        time: new Date()
+      }
+    })
+})
+
+// export type definition of API
+export type AppRouter = typeof appRouter
+`
+
+const nuxtTrpcContext = `import { inferAsyncReturnType } from '@trpc/server'
+import type { H3Event } from 'h3'
+
+/**
+ * Creates context for an incoming request
+ * @link https://trpc.io/docs/context
+ */
+export function createContext (_event: H3Event) {
+  /**
+   * Add any trpc-request context here. E.g., you could add \`prisma\` like this (if you've added it via sidebase):
+   * \`\`\`ts
+   * return { prisma: _event.context.prisma }
+   * \`\`\`
+   */
+  return {}
+}
+
+export type Context = inferAsyncReturnType<typeof createContext>
+`
+
+const nuxtTrpcApiHandler = `import { createNuxtApiHandler } from 'trpc-nuxt'
+import { appRouter } from '~/server/trpc/routers'
+import { createContext } from '~/server/trpc/context'
+
+// export API handler
+export default createNuxtApiHandler({
+  router: appRouter,
+  createContext
+})
+`
+
+const nuxtTrpcPlugin = `import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'
+import superjson from 'superjson'
+import type { AppRouter } from '~/server/trpc/routers'
+
+export default defineNuxtPlugin(() => {
+  /**
+   * createTRPCNuxtClient adds a \`useQuery\` composable
+   * built on top of \`useAsyncData\`.
+   */
+  const client = createTRPCNuxtClient<AppRouter>({
+    transformer: superjson,
+    links: [
+      httpBatchLink({
+        url: '/api/trpc'
+      })
+    ]
+  })
+
+  return {
+    provide: {
+      client
+    }
+  }
+})
+`
+
+const nuxtTrpcExamplePage = `<script setup lang="ts">
+const { $client } = useNuxtApp()
+
+const hello = await $client.hello.useQuery({ text: 'client' })
+</script>
+
+<template>
+  <div>
+    <!-- As \`superjson\` is already pre-configured, we can use \`time\` as a \`Date\` object without further deserialization 🎉 -->
+    tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
+  </div>
+</template>
+`
+
+const trpcDemoComponent = `<script lang="ts" setup>
+const { $client } = useNuxtApp()
+
+const hello = await $client.hello.useQuery({ text: 'client' })
+</script>
+<template>
+  ${generateModuleHTMLComponent(
+    "tRPC",
+    "tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.",
+    "https://sidebase.io/sidebase/components/trpc",
+    `<p>
+    <!-- As superjson is already pre-configured, we can use time as a Date object without further deserialization 🎉 -->
+    tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
+    </p>
+    `,
+    "",
+  ).html}
+</template>
+`
+
+const trpc: ModuleConfig = {
+  humanReadableName: "tRPC 10",
+  description: "Build end-to-end typesafe APIs in Nuxt applications. See more: https://trpc.io/",
+  dependencies: [{
+    name: "@trpc/server",
+    version: "^10.40.0",
+    isDev: false
+  }, {
+    name: "@trpc/client",
+    version: "^10.40.0",
+    isDev: false
+  }, {
+    name: "trpc-nuxt",
+    version: "^0.10.12",
+    isDev: false
+  }, {
+    name: "zod",
+    version: "^3.22.4",
+    isDev: false
+  }, {
+    name: "superjson",
+    version: "^1.12.2",
+    isDev: false
+  }],
+  nuxtConfig: {
+    build: {
+      transpile: ["trpc-nuxt"]
+    }
+  },
+  files: [
+    {
+      path: "server/trpc/trpc.ts",
+      content: nuxtTrpcRootConfig
+    },
+    {
+      path: "server/trpc/routers/index.ts",
+      content: nuxtTrpcRoutersIndex
+    },
+    {
+      path: "server/trpc/context.ts",
+      content: nuxtTrpcContext
+    },
+    {
+      path: "server/api/trpc/[trpc].ts",
+      content: nuxtTrpcApiHandler
+    },
+    {
+      path: "plugins/trpcClient.ts",
+      content: nuxtTrpcPlugin
+    },
+    {
+      path: "pages/trpc.vue",
+      content: nuxtTrpcExamplePage
+    },
+    {
+      path: "components/Welcome/TRPCDemo.vue",
+      content: trpcDemoComponent,
+    }
+  ],
+  tasksPostInstall: [],
+  indexVue: generateModuleHTMLSnippet("WelcomeTRPCDemo"),
+}
+
+export default trpc

From c6c79c2cd801bb56324a9891a0dabd28460ce045 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 12 Oct 2023 15:39:50 +0200
Subject: [PATCH 4/9] fixed some components

---
 .../2.addModules/moduleConfigs/naiveui.ts      |  5 +----
 src/steps/2.addModules/moduleConfigs/prisma.ts | 14 --------------
 .../2.addModules/moduleConfigs/tailwind.ts     |  5 +----
 src/steps/2.addModules/moduleConfigs/trpc.ts   | 18 ------------------
 4 files changed, 2 insertions(+), 40 deletions(-)

diff --git a/src/steps/2.addModules/moduleConfigs/naiveui.ts b/src/steps/2.addModules/moduleConfigs/naiveui.ts
index fa556fb..7832f54 100644
--- a/src/steps/2.addModules/moduleConfigs/naiveui.ts
+++ b/src/steps/2.addModules/moduleConfigs/naiveui.ts
@@ -1,10 +1,7 @@
 import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
 import type { ModuleConfig } from "../moduleConfigs"
 
-const naiveDemoComponent = `<script setup lang="ts">
-const showModal = ref(false)
-</script>
-<template>
+const naiveDemoComponent = `<template>
   ${generateModuleHTMLComponent(
     "NaiveUI",
     "A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast.",
diff --git a/src/steps/2.addModules/moduleConfigs/prisma.ts b/src/steps/2.addModules/moduleConfigs/prisma.ts
index 9a24b69..19b9540 100644
--- a/src/steps/2.addModules/moduleConfigs/prisma.ts
+++ b/src/steps/2.addModules/moduleConfigs/prisma.ts
@@ -84,17 +84,6 @@ export const resetDatabase = (databaseUrl?: string) => {
 }
 `
 
-const prismaExamplePage = `<script setup lang="ts">
-const { data: examples } = useFetch('/api/examples')
-</script>
-
-<template>
-  <div>
-    Prisma ORM Data from the database, received {{ examples?.length || 0 }} records: <pre>{{ examples }}</pre>
-  </div>
-</template>
-`
-
 const prismaDemoComponent = `<script lang="ts" setup>
 const { data: examples } = useFetch('/api/examples')
 </script>
@@ -144,9 +133,6 @@ const prisma: ModuleConfig = {
     path: "prisma/utils.ts",
     content: prismaUtils
   }, {
-    path: "pages/prisma.vue",
-    content: prismaExamplePage
-  },{
     path: "components/Welcome/PrismaDemo.vue",
     content: prismaDemoComponent,
   }],
diff --git a/src/steps/2.addModules/moduleConfigs/tailwind.ts b/src/steps/2.addModules/moduleConfigs/tailwind.ts
index 43eb5fb..4d07f85 100644
--- a/src/steps/2.addModules/moduleConfigs/tailwind.ts
+++ b/src/steps/2.addModules/moduleConfigs/tailwind.ts
@@ -1,10 +1,7 @@
 import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
 import type { ModuleConfig } from "../moduleConfigs"
 
-const tailwindDemoComponent = `<script lang="ts" setup>
-const { data: examples } = useFetch('/api/examples')
-</script>
-<template>
+const tailwindDemoComponent = `<template>
   ${generateModuleHTMLComponent(
     "TailwindCSS",
     "Rapidly build modern websites without ever leaving your HTML.",
diff --git a/src/steps/2.addModules/moduleConfigs/trpc.ts b/src/steps/2.addModules/moduleConfigs/trpc.ts
index bab3d5d..4c33fe8 100644
--- a/src/steps/2.addModules/moduleConfigs/trpc.ts
+++ b/src/steps/2.addModules/moduleConfigs/trpc.ts
@@ -105,20 +105,6 @@ export default defineNuxtPlugin(() => {
 })
 `
 
-const nuxtTrpcExamplePage = `<script setup lang="ts">
-const { $client } = useNuxtApp()
-
-const hello = await $client.hello.useQuery({ text: 'client' })
-</script>
-
-<template>
-  <div>
-    <!-- As \`superjson\` is already pre-configured, we can use \`time\` as a \`Date\` object without further deserialization 🎉 -->
-    tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
-  </div>
-</template>
-`
-
 const trpcDemoComponent = `<script lang="ts" setup>
 const { $client } = useNuxtApp()
 
@@ -189,10 +175,6 @@ const trpc: ModuleConfig = {
       path: "plugins/trpcClient.ts",
       content: nuxtTrpcPlugin
     },
-    {
-      path: "pages/trpc.vue",
-      content: nuxtTrpcExamplePage
-    },
     {
       path: "components/Welcome/TRPCDemo.vue",
       content: trpcDemoComponent,

From 538759a59e10c81b3b1a108d315acd941d538c96 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 12 Oct 2023 16:08:50 +0200
Subject: [PATCH 5/9] fixed template lintings

---
 .../2.addModules/generateModuleComponents.ts  | 37 ++++++++++---------
 src/steps/2.addModules/moduleConfigs/auth.ts  | 20 +++++-----
 .../2.addModules/moduleConfigs/naiveui.ts     | 29 ++++++++-------
 .../2.addModules/moduleConfigs/prisma.ts      |  5 +--
 .../2.addModules/moduleConfigs/tailwind.ts    |  4 +-
 src/steps/2.addModules/moduleConfigs/trpc.ts  |  6 +--
 6 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/src/steps/2.addModules/generateModuleComponents.ts b/src/steps/2.addModules/generateModuleComponents.ts
index 190f8b4..2354ddf 100644
--- a/src/steps/2.addModules/generateModuleComponents.ts
+++ b/src/steps/2.addModules/generateModuleComponents.ts
@@ -5,24 +5,25 @@ export function generateModuleHTMLComponent (
   demo: string,
   actions: string
 ): {html: string} {
-  const html = `  <div class="layout">
-        <div class="group">
-          <h1 class="heading">
-            ${title}
-          </h1>
-          <p class="description">
-            ${description}
-          </p>
-        </div>
-        <div class="group">${demo}
-          <div class="actions">
-            <WelcomeButtonLink href="${documentationLink}" :blank="true">
-              Documentation
-            </WelcomeButtonLink>
-            ${actions}
-          </div>
-        </div>
-      </div>`
+  const html = `<div class="layout">
+    <div class="group">
+      <h1 class="heading">
+        ${title}
+      </h1>
+      <p class="description">
+        ${description}
+      </p>
+    </div>
+    <div class="group">
+      ${demo}
+      <div class="actions">
+        <WelcomeButtonLink href="${documentationLink}" :blank="true">
+          Documentation
+        </WelcomeButtonLink>
+        ${actions}
+      </div>
+    </div>
+  </div>`
   return {
     html,
   }
diff --git a/src/steps/2.addModules/moduleConfigs/auth.ts b/src/steps/2.addModules/moduleConfigs/auth.ts
index 7a96905..cd0dd84 100644
--- a/src/steps/2.addModules/moduleConfigs/auth.ts
+++ b/src/steps/2.addModules/moduleConfigs/auth.ts
@@ -62,18 +62,18 @@ const { status, data, signIn, signOut } = useAuth()
     "Nuxt user authentication and sessions through nuxt-auth. nuxt-auth wraps NextAuth.js to offer the reliability & convenience of a 12k star library to the nuxt 3 ecosystem with a native developer experience (DX)",
     "https://sidebase.io/nuxt-auth/getting-started",
     `<p v-if="status === 'authenticated'">
-    Logged in as "{{ data?.user?.name }}"!
-    </p>
-    <p v-else>
-    Not logged in.
-    </p>
+        Logged in as "{{ data?.user?.name }}"
+      </p>
+      <p v-else>
+        Not logged in.
+      </p>
     `,
     `<WelcomeButtonLink v-if="status !== 'authenticated'" @click="signIn">
-    Sign in
-    </WelcomeButtonLink>
-    <WelcomeButtonLink v-else @click="signOut">
-    Sign out
-    </WelcomeButtonLink>`,
+          Sign in
+        </WelcomeButtonLink>
+        <WelcomeButtonLink v-else @click="signOut">
+          Sign out
+        </WelcomeButtonLink>`,
   ).html}
 </template>
 `
diff --git a/src/steps/2.addModules/moduleConfigs/naiveui.ts b/src/steps/2.addModules/moduleConfigs/naiveui.ts
index 7832f54..fc771d4 100644
--- a/src/steps/2.addModules/moduleConfigs/naiveui.ts
+++ b/src/steps/2.addModules/moduleConfigs/naiveui.ts
@@ -1,24 +1,27 @@
 import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
 import type { ModuleConfig } from "../moduleConfigs"
 
-const naiveDemoComponent = `<template>
+const naiveDemoComponent = `<script setup lang="ts">
+const showModal = ref(false)
+</script>
+<template>
   ${generateModuleHTMLComponent(
     "NaiveUI",
     "A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast.",
     "https://www.naiveui.com/en-US/os-theme",
-    `    <n-modal v-model:show="showModal">
-      <n-card
-        style="width: 600px"
-        title="NaiveUI + sidebase = ❤️"
-        role="dialog"
-        aria-modal="true"
-      >
-        Its this simple! You can now begin using any NaiveUI component in your project!
-      </n-card>
-    </n-modal>`,
+    `<n-modal v-model:show="showModal">
+        <n-card
+          style="width: 600px"
+          title="NaiveUI + sidebase = ❤️"
+          role="dialog"
+          aria-modal="true"
+        >
+          Its this simple! You can now begin using any NaiveUI component in your project!
+        </n-card>
+      </n-modal>`,
     `<WelcomeButtonLink @click="showModal = true">
-      Open modal
-    </WelcomeButtonLink>`,
+          Open modal
+        </WelcomeButtonLink>`,
   ).html}
 </template>
 `
diff --git a/src/steps/2.addModules/moduleConfigs/prisma.ts b/src/steps/2.addModules/moduleConfigs/prisma.ts
index 19b9540..98cd5ac 100644
--- a/src/steps/2.addModules/moduleConfigs/prisma.ts
+++ b/src/steps/2.addModules/moduleConfigs/prisma.ts
@@ -93,9 +93,8 @@ const { data: examples } = useFetch('/api/examples')
     "Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.",
     "https://sidebase.io/sidebase/components/prisma",
     `<p>
-    Prisma ORM Data from the database, received {{ examples?.length || 0 }} records!
-    </p>
-    `,
+        Prisma ORM Data from the database, received {{ examples?.length || 0 }} records!
+      </p>`,
     "",
   ).html}
 </template>
diff --git a/src/steps/2.addModules/moduleConfigs/tailwind.ts b/src/steps/2.addModules/moduleConfigs/tailwind.ts
index 4d07f85..887c0ca 100644
--- a/src/steps/2.addModules/moduleConfigs/tailwind.ts
+++ b/src/steps/2.addModules/moduleConfigs/tailwind.ts
@@ -8,8 +8,8 @@ const tailwindDemoComponent = `<template>
     "https://sidebase.io/sidebase/components/tailwindcss",
     "",
     `<WelcomeButtonLink  href="/_tailwind/" :blank="true">
-    Tailwind viewer
-    </WelcomeButtonLink>`,
+        Tailwind viewer
+      </WelcomeButtonLink>`,
   ).html}
 </template>
 `
diff --git a/src/steps/2.addModules/moduleConfigs/trpc.ts b/src/steps/2.addModules/moduleConfigs/trpc.ts
index 4c33fe8..7e6a061 100644
--- a/src/steps/2.addModules/moduleConfigs/trpc.ts
+++ b/src/steps/2.addModules/moduleConfigs/trpc.ts
@@ -116,9 +116,9 @@ const hello = await $client.hello.useQuery({ text: 'client' })
     "tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.",
     "https://sidebase.io/sidebase/components/trpc",
     `<p>
-    <!-- As superjson is already pre-configured, we can use time as a Date object without further deserialization 🎉 -->
-    tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
-    </p>
+        <!-- As superjson is already pre-configured, we can use time as a Date object without further deserialization 🎉 -->
+        tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
+      </p>
     `,
     "",
   ).html}

From b603e966eb89e7734fa2823d4d0d630f5e40f963 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 12 Oct 2023 16:10:23 +0200
Subject: [PATCH 6/9] last linting fixes

---
 src/steps/2.addModules/generateModuleComponents.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/steps/2.addModules/generateModuleComponents.ts b/src/steps/2.addModules/generateModuleComponents.ts
index 2354ddf..84e8ee3 100644
--- a/src/steps/2.addModules/generateModuleComponents.ts
+++ b/src/steps/2.addModules/generateModuleComponents.ts
@@ -30,9 +30,9 @@ export function generateModuleHTMLComponent (
 }
 
 export function generateModuleHTMLSnippet (componentName: string) {
-  const html = `  <div class="card">
-        <${componentName} />
-      </div>`
+  const html = `    <div class="card">
+          <${componentName} />
+        </div>`
   return {
     html,
   }

From d494a91bd81a3888d32ba2dea0a40989372ecca6 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 12 Oct 2023 21:20:24 +0200
Subject: [PATCH 7/9] download nuxt auth to 0.5.0

---
 src/steps/2.addModules/moduleConfigs/auth.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/steps/2.addModules/moduleConfigs/auth.ts b/src/steps/2.addModules/moduleConfigs/auth.ts
index cd0dd84..c19eebf 100644
--- a/src/steps/2.addModules/moduleConfigs/auth.ts
+++ b/src/steps/2.addModules/moduleConfigs/auth.ts
@@ -84,14 +84,13 @@ const auth: ModuleConfig = {
   dependencies: [
     {
       name: "@sidebase/nuxt-auth",
-      version: "^0.6.0-beta.6",
+      version: "^0.5.0",
       isDev: true
     },
     {
       name: "next-auth",
       version: "4.21.1",
       isDev: false,
-      isPeer: true
     }
   ],
   nuxtConfig: {

From 7926ee9e5b40cd893b7a3eccda3da300f7340607 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 12 Oct 2023 21:21:14 +0200
Subject: [PATCH 8/9] removed isPeer

---
 src/utils/addPackageDependency.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/utils/addPackageDependency.ts b/src/utils/addPackageDependency.ts
index 22aa0ec..d6efd14 100644
--- a/src/utils/addPackageDependency.ts
+++ b/src/utils/addPackageDependency.ts
@@ -6,7 +6,6 @@ export interface Dependency {
   name: string
   version: string
   isDev: boolean
-  isPeer?: boolean
 }
 
 export const addPackageDependencies = async (opts: {
@@ -18,15 +17,11 @@ export const addPackageDependencies = async (opts: {
   const pathToPackageJson = resolve(`./${projectDir}/package.json`)
   const packageJson = await readPackageJSON(pathToPackageJson)
 
-  for (const { name, version, isDev, isPeer } of dependencies) {
+  for (const { name, version, isDev } of dependencies) {
     if (isDev) {
       packageJson.devDependencies = defu(packageJson.devDependencies, {
         [name]: version
       })
-    } else if (isPeer) {
-      packageJson.peerDependencies = defu(packageJson.peerDependencies, {
-        [name]: version
-      })
     } else {
       packageJson.dependencies = defu(packageJson.dependencies, {
         [name]: version

From d68d5323ec75791a1d6ae942981862c360becc55 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 12 Oct 2023 21:37:29 +0200
Subject: [PATCH 9/9] increased timer from ci

---
 .github/workflows/ci.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 194d254..26b9dc1 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -48,4 +48,4 @@ jobs:
       - run: "export AUTH_ORIGIN=http://localhost:3000 && export AUTH_SECRET=test123 && cd my-sidebase-app && npm run build && timeout 30 npm run preview || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"
 
       # start dev-app and curl from it
-      - run: "cd my-sidebase-app && timeout 30 npm run dev & (sleep 10 && curl --fail localhost:3000) || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"
+      - run: "cd my-sidebase-app && timeout 30 npm run dev & (sleep 20 && curl --fail localhost:3000) || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"