1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Laravel】sweetalert2の導入

Last updated at Posted at 2022-07-14

公式・参考にした記事

環境

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ファイルを置いてもおそらく動きます。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?