My solution for the moment is to use the 404-handler of FastApi to route all 404s to VueJS and let the vuejs-router handle the remaining requests.
The frontend is build this way:
The outDir is in the the FastApi
app folder, is mounted as StaticFolder and in the 404-handler.
A minimal working
from pathlib import Path from fastapi import FastAPI, Request from fastapi.exceptions import HTTPException from fastapi.responses import HTMLResponse from fastapi.staticfiles import StaticFiles app = FastAPI() @app.get("/ping") async def ping(): return "pong" @app.exception_handler(404) async def redirect_all_requests_to_frontend(request: Request, exc: HTTPException): return HTMLResponse(open(Path(__file__).parent / "dist/index.html").read()) app.mount( "/assets", StaticFiles(directory=Path(__file__).parent / "dist/assets"), name="assets", )
All routes of the FastApi app have precedence, everything else is handled by the 404-handler and routed to the VueJS app. Real 404s should be handled within the vuejs-router. For example like this:
The order in the vuejs-router matters, so putting the notfound route at the end should do the trick.