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
🏵️🏵️🏵️🏵️
Ủng hộ Chung Nguyễn Blog
Chung Nguyễn Blog sử dụng FlashVPS - Dịch vụ quản trị máy chủ chuyên nghiệp để quản lý VPS
#FlashVPS là dịch vụ cloud panel trên nền tảng web hỗ trợ khách hàng:
- * Quản lý máy chủ số lượng nhiều
- * Không có kinh nghiệm quản lý máy chủ
- * Thích sử dụng giao diện web đơn giản, trực quan hơn terminal
- * Quá nhàm chán với việc ghi nhớ và lặp lại việc gõ các câu lệnh
- * Muốn tự động hóa mọi thao tác
- * Muốn tiết kiệm thời gian quản trị máy chủ
- * Muốn tiết kiệm tiền bạc, nhân lực quản trị máy chủ 👉 https://flashvps.dev
Các bài viết trên website thường xuyên được đăng tải và cập nhật trên trang Facebook Chung Nguyễn Blog hãy tặng cho Chung một LIKE nhé! Mãi yêu các bạn!
813 👍
Bình luận
x2teamno1
Chung Nguyễn
x2teamno1
Chung Nguyễn