FastAPIでHTMLを返したあと、フロントエンドでVueを使用したときのデリミタ{{ }}
の競合を解決する方法です。
Vue側のデリミタを変える方法はすぐ見つかりますが、Jinja2Templates側のデリミタを変える方法がなかなか見つからないので議事録として残します。
# Jinja2テンプレートの設定
dir_path = os.path.join(os.path.dirname(os.path.abspath(__file__)))
templates = Jinja2Templates(
directory=os.path.join(dir_path, "templates"),
# フロントエンドでVueを使用しており変数プレースホルダーが被るため変更する
variable_start_string="{$",
variable_end_string="$}",
)
@router.get(
"/login",
summary="ログイン画面",
description="ログイン画面のHTMLを返します。",
response_class=HTMLResponse,
tags=["HTMLResponse"],
)
async def login(request: Request):
context = {"request": request}
return templates.TemplateResponse("login.html", context)