How do I get FastAPI to do SSR for Vue 3?

Question

According to this documentation for Vue's SSR, it is possible to use node.js to render an app and return it using an express server. Is is possible to do the same with FastAPI?

Or is using Jinja2 templates or SPA the only solution?

Problems:

• No SPA: To help with SEO
• No SSG: Too many pages will be generated. Some need to be generated dynamically.
• No Jinja2/Python Templates: Node modules aren't built, bundled and served. All modules have to served from a remote package CDN.

I have a feeling that maybe changing the Vue 3 delimiters and then building the project and serving the files as Jinja2 templates is the solution, but I'm not sure how it would work with Vue's routers. I know the /dist folder can be served on the default route and then use a catchall can be used to display files that do exist.

Possible Solution

@app.get("/", response_class=FileResponse)
def read_index(request: Request):
    index = f"{static_folder}/index.html"
    return FileResponse(index)


@app.get("/{catchall:path}", response_class=FileResponse)
def read_index(request: Request):
    path = request.path_params["catchall"]
    file = static_folder + path

    if os.path.exists(file):
        return FileResponse(file)

    index = f"{static_folder}/index.html"
    return FileResponse(index)

Questions

• If there is a way to do SSR with FastAPI and Vue 3, what is it?
• If there is no direct way, how do I combine Vue's built /dist with Jinja2 templates to serve dynamic pages?

Answer 1

There are several options available, such as Nuxt.js, Quasar, and Gridsome, which provide support for SSR with FastAPI and Vue 3.