Python Vue 3 App Template

This is a template for a Python Vue 3 app. It uses Pipenv for python dependencies and Vite for Vue 3 development. For Backend, it uses FastAPI. For Frontend, it uses Vue 3 with TailwindCSS and TypeScript.

Getting Started

Prerequisites

• Python
• Node.js

Installing

1. Clone the repo

git clone https://github.com/KhanhhNe/python-vue3-app.git

2. Install Python dependencies

pipenv install

3. Install Node.js dependencies

cd web_src/
npm install

4. Run the app

Run in production mode (no Vue or FastAPI auto-reload)

pipenv run python main.py

Run in development mode (with Vue and FastAPI auto-reload)

export DEBUG=1 && pipenv run python main.py

Or on Windows

set DEBUG=1 ; pipenv run python main.py

5. Building the executable

pipenv run python build.py

The distributable .zip file will be in the build/dist/ folder.

Notes a.k.a. how to use this template

1. How the template works

• The web_src/ directory is the root directory for the Vue app. It is mounted at / in the FastAPI app when running in production mode.
• When in development mode, the Vue app is served by Vite and the FastAPI app is served by Uvicorn. The Vue app is mounted at / and the FastAPI app is mounted at /api/. In this mode, FastAPI must be running on port 8080 so that Vite server could proxy the requests to it.

2. Where to add things

• The Vue 3 app title will be set to the FastAPI title (you can change this in app/app.py). The FastAPI server also exposes useful OpenAPI urls (e.g. /api/docs, /api/redoc, /api/openapi.json) that you can use in the Vue app.
• FastAPI routers should be added in views/ folder, since FastAPI requires a specific order of routers, middlewares, and dependencies to work properly, so only change them if you know what you are doing.
• There are an empty typings.d.ts file in web_src/src/ directory. You can add your own Typescript typings here.
• Executables (exe, dll, etc.) should be added to executables/ folder. They will be bundled and added to executable path when running the app.