Sử dụng toastr với Laravel Mix

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 

🏵️🏵️🏵️🏵️

Đánh giá bài viết

Sử dụng toastr với Laravel Mix
0/5 0 votes

Comments

Để lại bình luận:
Vui lòng đăng nhập hoặc đăng ký mới tài khoản bạn nhé:
Login Register

Nội dung

    Tags
    Laravel (29) Laravel 5.5 (9) Bug (5) Laravel 5.7 (4) Võ Lâm (3) Blade (3) Laravel Blade (3) Php (3) Scripts Auto Võ Lâm (3) Laravel Router (3) 10K Brse (2) Kokusho (2) Kanji (2) Android (2) Tự Động Từ (2) Tha Động Từ (2) Trợ Từ (2) Authentication (2) Business Email (2) Laravel 5.4 (2) View (2) Sublime Text (2) Mysql (2) ゆうちょ銀行 (2) Laravel Mail (2) Auto Lọc Đồ Võ Lâm (2) Xampp (2) Laravel Mix (2) Laravel Localization (2) Tiêu Chuẩn Php (2) Hớt Tóc (1) Meros (1) Luyện Nghe Tiếng Nhật (1) Luyện Nói Tiếng Nhật (1) Shadowing (1) Shadowing Japanese (1) Katakana (1) Giáo Trình (1) Party (1) Yotsuya (1) Okonomiyaki (1) Yakisoba (1) Lol (1) Nhật Ký (1) Kanji Study (1) Đồ Dùng (1) Dưa Leo Đẹp Trai (1) Vlog (1) Động Đất (1) Sóng Thần (1) Trần Hoàng Trung Tín (1) Tokyo (1) Wakarimasen (1) Shirimasen (1) Suối Nước Nóng (1) Onsen (1) Đặc Sản Nhật Bản (1) Debugbar (1) Laravel 5.2 (1) Từ Điển (1) Tính Từ (1) Danh Từ (1) Minna No Nihongo (1) Minna No Nihongo 1 (1) Minna No Nihongo 2 (1) Tài Liệu (1) Ngọc Bổ Trợ (1) Liên Minh Huyền Thoại (1) Truyện Ngắn (1) 12 Con Giáp (1) Lễ Hội (1) Itabashi (1) Đường Lưỡi Bò (1) Weibo (1) Cách Sử Dụng Kara (1) Curriculum Vitae (1) Phân Biệt (1) Cách Sử Dụng Youni (1) Cách Sử Dụng Tameni (1) Note (1) Cách Sử Dụng Node (1) Cách Sử Dụng Te (1) Từ Láy (1) Hostinger (1) Kết Nối Mysql Từ Xa (1) Seven Eleven (1) Lawson (1) In Tiết Kiệm (1) Laravel 5.3 (1) Socialite (1) Thuật Toán Sort (1) Kính Ngữ (1) Khiêm Nhường Ngữ (1) Tag (1) Social Authentication (1) Demo (1) Html (1) Form (1) Helper Function (1) Editor (1) Tool (1) Thiết Kế Web (1) Notify (1) Notification (1) Hosting (1) Database (1) Localstorage (1) Client (1) Response (1) Google Cse (1) Blade If (1) Whoops (1) Exception (1) Router (1) Package (1) Update (1) Nhật Bản (1) Chuyển Tiền (1) Dcom (1) Request (1) Validate (1) Atm (1) Eloquent (1) Tips And Tricks (1) Office Professional 2016 (1) Vps Config (1) Laravel 5.6 (1) Laravel Sitemap (1) Võ Lâm Truyền Kỳ (1) Postman (1) Lấy Cao Răng Ở Nhật (1) Cryptocurrency (1) Php 7.2 (1) Composer (1) Xampp Virtual Domain (1) Xampp Virtual Host (1) Cách Nạp Tiền Vào Thẻ Dcom (1) Chuyển Tiền Từ Nhật Về Việt Nam (1) Dcom Chuyển Tiền Nhật Việt (1) Gửi Tiền Từ Nhật Về Việt Nam (1) Chuyen Tien Dcom (1) Cài Đặt Laravel (1) Laravel Installation (1) Cấu Hình Laravel (1) Laravel Configuration (1) Cấu Trúc Thư Mục Của Laravel (1) Laravel Folder Structure (1) Laravel Directory Structure (1) Laravel Routing (1) Photoshop Cs6 (1) Recaptcha (1) Excel (1) Editorconfig (1) Error Message (1) Laravel Relationship (1) Many-To-Many (1) Email Verification (1) Ffmpeg (1) Code Standard (1) Code Chuẩn Laravel (1) Đa Ngôn Ngữ (1) Laravel Pagination (1) Laravel Phân Trang (1) Laravel Error (1) Yahoo Mail (1) Chuyển Tiền Việt Nhật (1) Chuyển Tiền Nhật Việt (1) Phím Tắt Sublime Text (1) Laravel 5.5 (1) Wifi Ở Nhật Bản (1) Wifi Tại Nhật Bản (1) Mạng Wifi Ở Nhật Bản (1) Sử Dụng Wifi Ở Nhật Bản (1) Đăng Kí Wifi Ở Nhật Bản (1) Lắp Wifi Ở Nhật Bản (1) Laravel Model (1) Toastr (1) Utf-8 Bom (1) Utf-8 Without Bom (1) Psr-1 (1) Laravel Avatar (1) Psr-2 (1) Thuật Ngữ Laravel (1) Faststone Capture (1) Quay Phim Màn Hình (1) Chụp Ảnh Màn Hình (1) Phần Mềm Chụp Ảnh Màn Hình (1) Best Screen Capture (1) Screen Recorder (1) Nâng Cấp Laravel (1) Upgrade Laravel Version (1) Update Laravel To 5.7 (1) Laravel Validation (1) Laravel Formrequest (1) Laravel Modify Input (1) Mail (0)