├── tsconfig.json
├── .gitignore
├── prisma
    ├── dev.db
    └── schema.prisma
├── .vscode
    └── extensions.json
├── nuxt.config.ts
├── composables
    └── foo.ts
├── components
    ├── Menu.vue
    └── Posts.vue
├── pages
    ├── api.vue
    ├── index.vue
    └── async.vue
├── server
    └── api
    │   └── post.js
├── package.json
├── .env
├── plugins
    └── prisma.ts
└── README.md


/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json",
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .nuxt
4 | nuxt.d.ts
5 | .output
6 | 


--------------------------------------------------------------------------------
/prisma/dev.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xlanex6/nuxt3-prisma-demo/HEAD/prisma/dev.db


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "johnsoncodehk.volar"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | import { defineNuxtConfig } from 'nuxt3'
2 | 
3 | export default defineNuxtConfig({
4 | })
5 | 


--------------------------------------------------------------------------------
/composables/foo.ts:
--------------------------------------------------------------------------------
1 | import { useState } from '#app'
2 | 
3 | export const useTaMere = () => {
4 |   return useState('taMere', () => 'bar')
5 | }
6 | 


--------------------------------------------------------------------------------
/components/Menu.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <nuxt-link to="/"> index</nuxt-link>
3 |   <nuxt-link to="/async"> async</nuxt-link>
4 |   <nuxt-link to="/api"> api</nuxt-link>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/pages/api.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |   <Menu/>
 4 | 
 5 |   <h1>API</h1>
 6 |   <Posts :posts="posts"/>
 7 | </template>
 8 | 
 9 | <script setup>
10 | 
11 | const { data: posts } = await useAsyncData("api", () => $fetch("/api/post"));
12 | 
13 | </script>
14 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |   <Menu/>
 4 | 
 5 |   <h1>Composition API</h1>
 6 |   
 7 |   <Posts :posts="posts"/>
 8 | 
 9 | </template>
10 | 
11 | <script setup>
12 | const nuxtApp = useNuxtApp();
13 | 
14 | const posts = await nuxtApp.$prisma.post.findMany();
15 | </script>
16 | 


--------------------------------------------------------------------------------
/components/Posts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div
 3 |     v-for="{id, title, content } in posts"
 4 |     :key="id"
 5 |   >
 6 |   <h3>{{id}} - {{title}}</h3>
 7 | 
 8 |   <p>{{content}}</p>
 9 | 
10 |   </div>
11 | </template>
12 | 
13 | <script setup>
14 | const props = defineProps({
15 |   posts: {
16 |     type: Object,
17 |   }
18 | })
19 | </script>
20 | 


--------------------------------------------------------------------------------
/server/api/post.js:
--------------------------------------------------------------------------------
 1 | import pkg from '@prisma/client';
 2 | const { PrismaClient } = pkg;
 3 | 
 4 | 
 5 | const prisma = new PrismaClient({
 6 |   log: ['query']
 7 | })
 8 | 
 9 | 
10 | 
11 | 
12 | export default async (req, res) => {
13 | 
14 |   //  how to get context with $prisma on it ? 
15 | 
16 |   return await prisma.post.findMany()
17 | }
18 | 


--------------------------------------------------------------------------------
/pages/async.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Menu/>
 3 | 
 4 |   <h1>ASYNCDATA</h1>
 5 |    <Posts :posts="posts"/>
 6 | 
 7 | </template>
 8 | 
 9 | <script setup>
10 | const nuxtApp = useNuxtApp();
11 | 
12 | const { data: posts } = await useAsyncData("async", () =>
13 |   nuxtApp.$prisma.post.findMany()
14 |   
15 |   // basic prisma api 
16 | 
17 | );
18 | 
19 | </script>
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "nuxt dev",
 5 |     "build": "cp node_modules/.prisma/client/package.json node_modules/.prisma && nuxt build",
 6 |     "start": "node .output/server/index.mjs"
 7 |   },
 8 |   "devDependencies": {
 9 |     "nuxt3": "latest",
10 |     "prisma": "3.11.0"
11 |   },
12 |   "dependencies": {
13 |     "@prisma/client": "3.11.0",
14 |     "@vueuse/core": "8.1.2"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | # Environment variables declared in this file are automatically made available to Prisma.
2 | # See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables
3 | 
4 | # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server and MongoDB (Preview).
5 | # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
6 | 
7 | # DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
8 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | generator client {
 5 |   provider = "prisma-client-js"
 6 | }
 7 | 
 8 | datasource db {
 9 |   provider = "sqlite"
10 |   url      = "file:./dev.db"
11 | }
12 | 
13 | model Post {
14 |   id          Int      @id @default(autoincrement())
15 |   title       String   @unique
16 |   content     String
17 |   published   Boolean  @default(false)
18 |   publishDate DateTime @default(now())
19 | }
20 | 


--------------------------------------------------------------------------------
/plugins/prisma.ts:
--------------------------------------------------------------------------------
 1 | import pkg from '@prisma/client';
 2 | const { PrismaClient } = pkg;
 3 | 
 4 | 
 5 | const prisma = new PrismaClient(
 6 |   {
 7 |     // log: ['query'],
 8 |   }
 9 | )
10 | 
11 | // https://github.com/prisma/prisma/issues/6219
12 | import { defineNuxtPlugin } from '#app'
13 | 
14 | export default defineNuxtPlugin(nuxtApp => {
15 | 
16 |   // bind prisma client to nuxt via $prisma
17 |   nuxtApp.provide('prisma', prisma);
18 | 
19 |   //  when NUXT is done => 
20 |   //  await prisma.$disconnect() to avoid multiple PrismaClient instance
21 | })
22 | 
23 | 
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter with [Prisma](https://www.prisma.io/?utm_source=Prisma+Ambassador&utm_medium=Blop+post&utm_campaign=ambassador_program&utm_content=Prisma+AP+Alex+Duval)
 2 | 
 3 | Check [Prisma.io](https://www.prisma.io/?utm_source=Prisma+Ambassador&utm_medium=Blop+post&utm_campaign=ambassador_program&utm_content=Prisma+AP+Alex+Duval)
 4 | 
 5 | [Main issue](https://github.com/prisma/prisma/issues/5030#issuecomment-912588323)
 6 | 
 7 | Prisma on the edge looks great, more info during the [serverles prisma conf](https://www.prisma.io/serverless)
 8 | 
 9 | ## Setup
10 | 
11 | Make sure to install the dependencies
12 | 
13 | ```bash
14 | yarn install
15 | ```
16 | 
17 | ## Development
18 | 
19 | Start the development server on http://localhost:3000
20 | 
21 | ```bash
22 | yarn dev
23 | ```
24 | 
25 | ## Production
26 | 
27 | Build the application for production:
28 | 
29 | ```bash
30 | yarn build
31 | ```
32 | 
33 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).
34 | 


--------------------------------------------------------------------------------