How to make FastAPI perform SSR for Vue 3?

Question

According to Vue's SSR documentation, it is possible to render an application using node.js and return it using an Express server. Can FastAPI do the same thing?

Or is using Jinja2 templates or SPA the only solution?

Question:

• No SPA: Helps with SEO
• No SSG: Too many pages will be generated. Some need to be generated dynamically.
• No Jinja2/Python templates: Node modules will not be built, bundled, and served. All modules must be served via a remote package CDN.

I have a feeling that maybe changing the Vue 3 delimiter and then building the project and serving the files as Jinja2 templates would be the solution, but I'm not sure how it would work with Vue's router. I know that the /dist folder can be served on the default route and then use a catch-all that can be used to show the files that actually exist.

Possible solutions

@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)

Question

• If there was a way to do SSR using FastAPI and Vue 3, what would it be?
• If there is no direct way, how to combine Vue's built-in /dist with Jinja2 templates to provide dynamic pages?

Answer 1

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