DjangoでAlpineJSを使う #Alpine.js

個人メモ

公式 https://alpinejs.dev/essentials/installation の通り、headタグにCDNを記述

templates/base.html

<html>
    <head>
        ...
 
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    </head>
    <body>
        <div class="container">
          {% block content %}{% endblock %}
        </div>
    </body>
</html>

AlpineJSを使いたいところで x-data を記述して使用する

app/create.html

{% extends "base.html" %}

{% block content %}
<div x-data="app()">
    <p>Hello <span x-text="message"></span></p>
</div>

<script>
  const app = () => {
    return {
      message: "AlpineJS"
    }
  }
</script>
{% endblock %}