feat: bump to nuxt 3.2, nuxt-auth 0.4.0, prisma 4.10, trpc 10.10 and more (#19)

* chore: update minor and major deps

* chore: remove unused prisma command, fix locale to ensure render match for tRPC page

* chore: resolve prisma hybrid rendering problem by removing bad p-tag

* revert: no more need to explicitly type examples as useFetch was fixed

Author: BracketJohn

.github/workflows/ci.yaml

@@ -35,7 +35,7 @@ jobs:
       - run: npm run dev -- -- --ci
 
       # This is what the user would do, minus actually starting the application
-      - run: cd my-sidebase-app && npx prisma db push && npx prisma generate
+      - run: cd my-sidebase-app && npx prisma db push
 
       # code should be 100% correct at the start
       - run: cd my-sidebase-app && npm run lint
@@ -52,4 +52,3 @@ jobs:
 
       # build prod-app, start it in prod mode and curl from it
       - run: "export AUTH_ORIGIN=http://localhost:3000 && cd my-sidebase-app && npm run build && timeout 30 npm run preview & (sleep 10 && curl --fail localhost:3000)  || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"
-

src/messages.ts

@@ -73,8 +73,7 @@ export const sayGoodbye = (preferences: Preferences) => {
   }
 
   if (preferences.addModules?.includes("prisma") || preferences.setStack === "cheviot") {
-    sayCommand("npx prisma db push", "Initialize the database")
-    sayCommand("npx prisma generate", "Initialize the Prisma client")
+    sayCommand("npx prisma db push", "Initialize the database & Prisma client")
   }
 
   sayCommand(`${packageManager} run dev`, "Start the development server, use CTRL+C to stop")

src/steps/2.addModules/moduleConfigs.ts

@@ -53,7 +53,7 @@ DATABASE_URL=file:./db.sqlite
 `
 
 const prismaExampleEndpoint = `/**
- * Fetch all \`examples\` from the database. Run \`npx prisma generate\` and \`npx prisma db push\` for this to work.
+ * 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
@@ -111,21 +111,12 @@ export const resetDatabase = (databaseUrl?: string) => {
 `
 
 const prismaExamplePage = `<script setup lang="ts">
-/**
- * In Nuxt 3.1.2 \`useFetch\` return types are not correctly inferred. In order to workaround this limitation, we sadly need to manually import and type a lof ot things.
- *
- * As soon as https://github.com/nuxt/nuxt/issues/15280 is closed and released, we can go back to just: \`const { data: examples } = useFetch('/api/examples')\`
- * */
-import type { Ref } from 'vue'
-import { Example } from '.prisma/client'
-
-const { data } = useFetch('/api/examples')
-const examples = (data as Ref<Example[] | null>)
+const { data: examples } = useFetch('/api/examples')
 </script>
 
 <template>
   <div>
-    <p>Prisma ORM Data from the database, received {{ examples?.length || 0 }} records: <pre>{{ examples }}</pre></p>
+    Prisma ORM Data from the database, received {{ examples?.length || 0 }} records: <pre>{{ examples }}</pre>
   </div>
 </template>
 `
@@ -315,7 +306,7 @@ const hello = await $client.hello.useQuery({ text: 'client' })
 <template>
   <div>
     <!-- As \`superjson\` is already pre-configured, we can use \`time\` as a \`Date\` object without further deserialization 🎉 -->
-    <p>tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString() }}".</p>
+    tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
   </div>
 </template>
 `
@@ -348,12 +339,12 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
     dependencies: [
       {
         name: "prisma",
-        version: "^4.8.0",
+        version: "^4.10.1",
         isDev: true
       },
       {
         name: "@prisma/client",
-        version: "^4.8.0",
+        version: "^4.10.1",
         isDev: false
       }
     ],
@@ -379,8 +370,7 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
     }],
     tasksPostInstall: [
       "- [ ] Prisma: Edit your `prisma/prisma.schema` to your liking",
-      "- [ ] Prisma: Run `npx prisma db push` to sync the schema to your database after changing the schema",
-      "- [ ] Prisma: Run `npx prisma generate` to re-generate the client after changing the schema"
+      "- [ ] Prisma: Run `npx prisma db push` to sync the schema to your database & generate the Prisma Client",
     ],
     indexVue: generateModuleHTMLSnippet(
       "Prisma ORM",
@@ -396,9 +386,14 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
     dependencies: [
       {
         name: "@sidebase/nuxt-auth",
-        version: "^0.3.3",
+        version: "^0.4.1",
         isDev: true
       },
+      {
+        name: "next-auth",
+        version: "^4.18.8",
+        isDev: false
+      }
     ],
     nuxtConfig: {
       modules: ["@sidebase/nuxt-auth"]
@@ -427,23 +422,23 @@ 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.5.0",
+      version: "^10.10.0",
       isDev: false
     }, {
       name: "@trpc/client",
-      version: "^10.5.0",
+      version: "^10.10.0",
       isDev: false
     }, {
       name: "trpc-nuxt",
-      version: "^0.4.4",
+      version: "^0.6.0",
       isDev: false
     }, {
       name: "zod",
-      version: "^3.20.2",
+      version: "^3.20.6",
       isDev: false
     }, {
       name: "superjson",
-      version: "^1.12.1",
+      version: "^1.12.2",
       isDev: false
     }],
     nuxtConfig: {
@@ -512,7 +507,7 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
     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.5.1",
+      version: "^0.6.0",
       isDev: true
     }],
     nuxtConfig: {

src/steps/6.addReadme.ts

@@ -51,6 +51,7 @@ Some tasks you should probably do in the beginning are:
 - [ ] replace this generic README with a more specific one
 - [ ] install the Vue Volar extension
 - [ ] enable [Volar takeover mode](https://nuxt.com/docs/getting-started/installation#prerequisites) to ensure a smooth editor setup
+- [ ] [install Nuxt 3 devtools](https://github.com/nuxt/devtools#installation) if you want to use them
 ${tasksPostInstall.join("\n")}
 
 ### Setup