├── .gitattributes ├── .gitignore ├── .npmrc ├── LICENSE ├── README.md ├── api └── index.py ├── app.vue ├── nuxt.config.ts ├── package.json ├── pnpm-lock.yaml ├── requirements.txt ├── src ├── public │ └── favicon.ico └── server │ ├── routes │ └── backend │ │ └── index.get.ts │ └── tsconfig.json └── tsconfig.json /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.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 | 26 | # Python 27 | __pycache__ -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 TutorFx 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 |

Nuxt.js FastAPI Starter

5 | 6 |

7 | 8 |

Simple Nuxt.js boilerplate that uses FastAPI as the API backend.

9 | 10 |
11 | 12 | ## Introduction 13 | 14 | This is a hybrid Nuxt.js + Python app that uses Nuxt.js as the frontend and FastAPI as the API backend. One great use case of this is to write Nuxt.js apps that use Python AI libraries on the backend. 15 | 16 | ## How It Works 17 | 18 | The Python/FastAPI server is mapped into to Nuxt.js app under `/api/`. 19 | 20 | The server API of Nuxt3 has been relocated to `/backend/` to make it compatible with the Vercel API routes. 21 | 22 | This is implemented using [`nuxt.config.js` rewrites](https://github.com/tutorfx/nuxtjs-fastapi/blob/main/nuxt.config.ts) to map any request to `/api/:path*` to the FastAPI API, which is hosted in the `/api` folder. 23 | 24 | On localhost, the rewrite will be made to the `127.0.0.1:8000` port, which is where the FastAPI server is running. 25 | 26 | In production, the FastAPI server is hosted as [Python serverless functions](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/python) on Vercel. 27 | 28 | ## Demo 29 | 30 | https://nuxtjs-fastapi-starter.vercel.app/ 31 | 32 | ## Deploy Your Own 33 | 34 | You can clone & deploy it to Vercel with one click: 35 | 36 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Ftutorfx%2Fnuxtjs-fastapi%2Ftree%2Fmain) 37 | 38 | ## Developing Locally 39 | 40 | You can clone & create this repo with the following command 41 | 42 | ```bash 43 | npx create-nuxt-app nuxtjs-fastapi --example "https://github.com/tutorfx/nuxtjs-fastapi" 44 | ``` 45 | 46 | ## Getting Started 47 | 48 | First, install the dependencies: 49 | 50 | ```bash 51 | npm install 52 | # or 53 | yarn 54 | # or 55 | pnpm install 56 | ``` 57 | 58 | Then, run the development server: 59 | 60 | ```bash 61 | npm run dev 62 | # or 63 | yarn dev 64 | # or 65 | pnpm dev 66 | ``` 67 | 68 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 69 | 70 | The FastApi server will be running on [http://127.0.0.1:8000](http://127.0.0.1:8000) – feel free to change the port in `package.json` (you'll also need to update it in `nuxt.config.js`). 71 | 72 | ## Learn More 73 | 74 | To learn more about Nuxt.js, take a look at the following resources: 75 | 76 | - [Nuxt.js Documentation](https://nuxt.com/docs) - learn about Nuxt.js features and API. 77 | - [FastAPI Documentation](https://fastapi.tiangolo.com/) - learn about FastAPI features and API. 78 | 79 | You can check out [the Nuxt.js GitHub repository](https://github.com/nuxt/nuxt.js/) - your feedback and contributions are welcome! -------------------------------------------------------------------------------- /api/index.py: -------------------------------------------------------------------------------- 1 | from fastapi import FastAPI 2 | 3 | app = FastAPI() 4 | 5 | @app.get("/api") 6 | def hello_world(): 7 | return {"message": "Hello World", "api": "Python"} 8 | 9 | @app.get("/api/test") 10 | def test(): 11 | return {"message": "Test"} -------------------------------------------------------------------------------- /app.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | devtools: { enabled: true }, 4 | srcDir: "src/", 5 | routeRules: { 6 | '/api/**': { 7 | proxy: process.env.NODE_ENV === "development" ? "http://127.0.0.1:8000/api/**" : "/api/**", 8 | }, 9 | '/docs': { 10 | proxy: "http://127.0.0.1:8000/docs", 11 | }, 12 | '/openapi.json': { 13 | proxy: "http://127.0.0.1:8000/openapi.json", 14 | } 15 | }, 16 | nitro: { 17 | vercel: { 18 | config: { 19 | routes: [{ 20 | "src": "/api/(.*)", 21 | "dest": "api/index.py" 22 | }] 23 | } 24 | } 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxtjs-fastapi", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "fastapi-dev": "pip3 install -r requirements.txt && python -m uvicorn api.index:app --reload", 8 | "nuxt-dev": "nuxt dev", 9 | "dev": "concurrently \"npm run nuxt-dev\" \"npm run fastapi-dev\"", 10 | "generate": "nuxt generate", 11 | "preview": "nuxt preview", 12 | "postinstall": "nuxt prepare" 13 | }, 14 | "devDependencies": { 15 | "@nuxt/devtools": "^1.2.0", 16 | "nuxt": "^3.11.2", 17 | "vue": "^3.4.23", 18 | "vue-router": "^4.3.2" 19 | }, 20 | "dependencies": { 21 | "concurrently": "^8.2.2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | fastapi==0.110.2 2 | uvicorn[standard]==0.29.0 -------------------------------------------------------------------------------- /src/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TutorFx/nuxtjs-fastapi/642816a901e5174f27336c95dd03e3199a0df5a4/src/public/favicon.ico -------------------------------------------------------------------------------- /src/server/routes/backend/index.get.ts: -------------------------------------------------------------------------------- 1 | export default defineEventHandler((event) => { 2 | return {"message": "Hello World", "api": "Nuxt"} 3 | }) 4 | -------------------------------------------------------------------------------- /src/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | --------------------------------------------------------------------------------