Sử dụng toastr với Laravel Mix

Nếu đọc qua bài này Tạo thông báo Notification cho website cực ngầu bằng thư viện jQuery hẳn các bạn sẽ thấy toastr được nhắc đến trong đó. Chung sử dụng toastr để hiển thị cảnh báo trong các ứng dụng web của mình. Bạn có thể tích hợp vào website dễ dàng bằng thẻ link và script.

Nhưng với Webpack và Laravel, chúng ta không nên làm như thế, không chỉ toastr mà bất kỳ thư viện nào phụ thuộc vào jQuery cũng như vậy. Cách duy nhất mình có thể làm cho nó chạy là thông qua npm - quản lý tập trung và đóng gói thành một file duy nhất.

Bài viết này giả sử bạn đang có một project Laravel rồi nhé, chúng ta sẽ đi vào tích hợp toastr vào Laravel web app

Install toastr thông qua npm hoặc yarn

Chọn một trong hai nhé, nếu bạn sử dụng npm

npm install toastr --save-dev

Yarn

yarn add toastr

Thêm vào app.js

Trong resources\assets\js\app.js thêm dòng sau

window.toastr = require('toastr')

Thêm vào app.scss hoặc app.less

Nếu bạn dùng sass thì bỏ vào file resources\assets\sass\app.scss dòng sau:

@import "~toastr/toastr.scss";

Nếu bạn dùng sass thì bỏ vào file resources\assets\less\app.less dòng sau:

@import "~toastr/toastr.less";

Đến đây bạn chỉ còn việc chạy npm run dev để build ra file app.css và app.js dùng trong web của bạn.

Khi nào cần show thông báo chỉ cần viết như vầy là được:

toastr.success('Đăng nhập thành công!');

Coi thêm cách viết bằng link demo này: https://codeseven.github.io/toastr/demo.html 

🏵️🏵️🏵️🏵️