├── cat-consumer
    ├── .npmrc
    ├── app.vue
    ├── server
    │   └── tsconfig.json
    ├── public
    │   └── favicon.ico
    ├── pages
    │   ├── index.vue
    │   └── cat
    │   │   ├── [...name].vue
    │   │   └── index.vue
    ├── tsconfig.json
    ├── nuxt.config.ts
    ├── .gitignore
    ├── package.json
    └── README.md
├── cat-provider
    ├── .npmrc
    ├── server
    │   ├── tsconfig.json
    │   └── api
    │   │   ├── cat.get.ts
    │   │   ├── cat.delete.ts
    │   │   ├── cat.post.ts
    │   │   └── cat.patch.ts
    ├── app.vue
    ├── public
    │   └── favicon.ico
    ├── tsconfig.json
    ├── nuxt.config.ts
    ├── .gitignore
    ├── package.json
    └── README.md
└── README.md


/cat-consumer/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/cat-provider/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/cat-consumer/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <NuxtPage />
4 |   </div>
5 | </template>
6 | 


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


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


--------------------------------------------------------------------------------
/cat-provider/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <NuxtWelcome />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/cat-consumer/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Baroshem/nuxt-backend/HEAD/cat-consumer/public/favicon.ico


--------------------------------------------------------------------------------
/cat-provider/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Baroshem/nuxt-backend/HEAD/cat-provider/public/favicon.ico


--------------------------------------------------------------------------------
/cat-consumer/pages/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>Visit /cat or /cat?name={name} for data about cats</div>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/cat-consumer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/cat-provider/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/cat-consumer/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | // https://nuxt.com/docs/api/configuration/nuxt-config
2 | export default defineNuxtConfig({
3 |   devtools: { enabled: true }
4 | })
5 | 


--------------------------------------------------------------------------------
/cat-provider/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   devtools: { enabled: true },
 4 |   modules: ['@nuxtjs/supabase', 'nuxt-security'],
 5 | 
 6 |   security: {
 7 |     corsHandler: {
 8 |         origin: '*'
 9 |     }
10 |   },
11 | })
12 | 


--------------------------------------------------------------------------------
/cat-consumer/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/cat-provider/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Taking Nuxt to the Backend!
2 | 
3 | This repository is an example project where there are two Nuxt applications:
4 | 
5 | 1. Cat Provider -> Nuxt (Nitro) app that acts as a backend microservice. It connects to Supabase to fetch the data and return it to the user.
6 | 2. Cat Consumer -> Nuxt application that fetches the data from Cat Provider to display the data from this REST API to the user.
7 | 
8 | 


--------------------------------------------------------------------------------
/cat-consumer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "devDependencies": {
13 |     "@nuxt/devtools": "latest",
14 |     "nuxt": "^3.7.4",
15 |     "vue": "^3.3.4",
16 |     "vue-router": "^4.2.5"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/cat-provider/server/api/cat.get.ts:
--------------------------------------------------------------------------------
 1 | import { serverSupabaseClient } from "#supabase/server";
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const query = getQuery(event);
 5 | 
 6 |   const name = query.name;
 7 | 
 8 |   const client = await serverSupabaseClient(event);
 9 | 
10 |   return !name
11 |     ? (await client.from("cats").select("*")).data
12 |     : (await client.from("cats").select("*").eq("name", name).single()).data;
13 | });
14 | 


--------------------------------------------------------------------------------
/cat-provider/server/api/cat.delete.ts:
--------------------------------------------------------------------------------
 1 | import { serverSupabaseClient } from "#supabase/server";
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const query = getQuery(event);
 5 | 
 6 |   const id = query.id;
 7 | 
 8 |   if (!id) throw createError({ statusCode: 400, statusMessage: "Bad Request" });
 9 | 
10 |   const client = await serverSupabaseClient(event);
11 | 
12 |   const { data } = await client.from("cats").delete().eq("id", id);
13 | 
14 |   return { cat: data };
15 | });
16 | 


--------------------------------------------------------------------------------
/cat-provider/server/api/cat.post.ts:
--------------------------------------------------------------------------------
 1 | import { serverSupabaseClient } from "#supabase/server";
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const body = await readBody(event);
 5 | 
 6 |   if (!body || !body.image || !body.name)
 7 |     throw createError({ statusCode: 400, statusMessage: "Bad Request" });
 8 | 
 9 |   const client = await serverSupabaseClient(event);
10 | 
11 |   const { data } = await client.from("cats").insert(body);
12 | 
13 |   return { cat: data };
14 | });
15 | 


--------------------------------------------------------------------------------
/cat-consumer/pages/cat/[...name].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <img :src="cat?.image" />
 4 |     <h2>{{ cat?.name }}</h2>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup lang="ts">
 9 | const route = useRoute();
10 | const cat = ref();
11 | onMounted(async () => {
12 |   // https://nuxt-backend.vercel.app/
13 |   const res = await $fetch("http://localhost:3001/api/cat", {
14 |     method: "GET",
15 |     params: {
16 |       name: route.params.name[0],
17 |     },
18 |   });
19 | 
20 |   cat.value = res;
21 | });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/cat-consumer/pages/cat/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       <li v-for="cat in cats" :key="cat.id">
 5 |         <img :src="cat.image" />
 6 |         <h2>{{ cat.name }}</h2>
 7 |       </li>
 8 |     </ul>
 9 |   </div>
10 | </template>
11 | 
12 | <script setup lang="ts">
13 | const cats = ref();
14 | onMounted(async () => {
15 |   // https://nuxt-backend.vercel.app/
16 |   const res = await $fetch("http://localhost:3001/api/cat", {
17 |     method: "GET",
18 |   });
19 | 
20 |   cats.value = res;
21 | });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/cat-provider/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "devDependencies": {
13 |     "@nuxt/devtools": "latest",
14 |     "@nuxtjs/supabase": "^1.1.3",
15 |     "nuxt": "^3.7.4",
16 |     "nuxt-security": "^0.14.4",
17 |     "vue": "^3.3.4",
18 |     "vue-router": "^4.2.5"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/cat-provider/server/api/cat.patch.ts:
--------------------------------------------------------------------------------
 1 | import { serverSupabaseClient } from "#supabase/server";
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const body = await readBody(event);
 5 | 
 6 |   if (!body)
 7 |     throw createError({ statusCode: 400, statusMessage: "Bad Request" });
 8 | 
 9 |   const client = await serverSupabaseClient(event);
10 | 
11 |   const { name, id, image } = body;
12 | 
13 |   const { data } = await client
14 |     .from("cats")
15 |     .update({ name, image } as never)
16 |     .eq("id", id);
17 | 
18 |   return { cat: data };
19 | });
20 | 


--------------------------------------------------------------------------------
/cat-consumer/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # npm
11 | npm install
12 | 
13 | # pnpm
14 | pnpm install
15 | 
16 | # yarn
17 | yarn install
18 | 
19 | # bun
20 | bun install
21 | ```
22 | 
23 | ## Development Server
24 | 
25 | Start the development server on `http://localhost:3000`:
26 | 
27 | ```bash
28 | # npm
29 | npm run dev
30 | 
31 | # pnpm
32 | pnpm run dev
33 | 
34 | # yarn
35 | yarn dev
36 | 
37 | # bun
38 | bun run dev
39 | ```
40 | 
41 | ## Production
42 | 
43 | Build the application for production:
44 | 
45 | ```bash
46 | # npm
47 | npm run build
48 | 
49 | # pnpm
50 | pnpm run build
51 | 
52 | # yarn
53 | yarn build
54 | 
55 | # bun
56 | bun run build
57 | ```
58 | 
59 | Locally preview production build:
60 | 
61 | ```bash
62 | # npm
63 | npm run preview
64 | 
65 | # pnpm
66 | pnpm run preview
67 | 
68 | # yarn
69 | yarn preview
70 | 
71 | # bun
72 | bun run preview
73 | ```
74 | 
75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
76 | 


--------------------------------------------------------------------------------
/cat-provider/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # npm
11 | npm install
12 | 
13 | # pnpm
14 | pnpm install
15 | 
16 | # yarn
17 | yarn install
18 | 
19 | # bun
20 | bun install
21 | ```
22 | 
23 | ## Development Server
24 | 
25 | Start the development server on `http://localhost:3000`:
26 | 
27 | ```bash
28 | # npm
29 | npm run dev
30 | 
31 | # pnpm
32 | pnpm run dev
33 | 
34 | # yarn
35 | yarn dev
36 | 
37 | # bun
38 | bun run dev
39 | ```
40 | 
41 | ## Production
42 | 
43 | Build the application for production:
44 | 
45 | ```bash
46 | # npm
47 | npm run build
48 | 
49 | # pnpm
50 | pnpm run build
51 | 
52 | # yarn
53 | yarn build
54 | 
55 | # bun
56 | bun run build
57 | ```
58 | 
59 | Locally preview production build:
60 | 
61 | ```bash
62 | # npm
63 | npm run preview
64 | 
65 | # pnpm
66 | pnpm run preview
67 | 
68 | # yarn
69 | yarn preview
70 | 
71 | # bun
72 | bun run preview
73 | ```
74 | 
75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
76 | 


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