公式・参考にした記事
- SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
- Import SweetAlert2 into Laravel with NPM - DC Blog
環境
Laravel 8.38.0
docker desktop v5
インストール
npmを使用したインストールを推奨します。
cdnのスクリプトをそのまま読み込むと、
対象のパッケージが将来メンテナンスされなくなると動かなくなるため。
npm install sweetalert2
package.jsonのdependenciesにsweetalert2が追加されていたら、
インストールは成功です。
Laravelでsweetalert2を使用できるようにする
resources/js/app.js にsweetalertをインポートするよう記述を追記します。
import swal from 'sweetalert2';
またSweetAlert2をグローバルに使用する場合は、ウィンドウオブジェクトに追加できます。
window.Swal = swal;
記述が終われば変更をapp.js にコンパイルする必要があるので、
以下を実行します。
npm run dev
public/js/ 配下にコンパイルされたapp.jsが生成されていれば完了です。
bladeでsweetalert2使用する
assetを使用してscriptタグに埋め込みます。
<script src="{{ asset('/js/app.js') }}"></script>
プロジェクトにLaravel Mixが導入されてされているならば下記にする
<script src="{{ mix('/js/app.js') }}"></script>
プロジェクト全てにsweetalert2を使用するのであれば、
共通のbladeにscriptタグを配置した方が良いです。。
使用方法はドキュメントを読みながら案件に合わせて導入しましょう。
https://sweetalert2.github.io/#examples
ps.
おそらくsweetalert無印もこのインストール方法で動きます。
今回はnpmを使用して導入しましたが、composerを使用して導入する方法もあるみたいです。
public/js/ 配下にダウンロードしてきたjsファイルを置いてもおそらく動きます。