Viết plugin notification đơn giản cho Vue.js

Bài viết hôm nay chúng ta sẽ cùng tìm hiểu cách viết plugin đơn giản cho Vue có chức năng hiển thị notification thông qua việc sử dụng thư viện notie (https://github.com/jaredreich/notie).

Giới thiệu sơ lược

Plugins usually add global-level functionality to Vue.

Theo như lời giới thiệu trên vuejs.org thì việc sử dụng plugin sẽ giúp chúng ta thêm những tính năng ở tầng global.

Nếu bạn thấy font trên trang này lỗi, hãy cài extension của 12bit để font đẹp và dễ đọc hơn:
Tải bản dành cho Chrome
Tải bản dành cho Firefox.

Việc dùng plugin cũng trở nên thuận tiện khi chúng ta có thể sử dụng những tính năng bên ngoài mà không cần phải viết trực tiếp vào ứng dụng của mình. Nếu không cần sử dụng nữa, chúng ta có thể gỡ bỏ dễ dàng.

Có những loại plugin chúng ta có thể viết cho Vue như:

  • Thêm những phương thức, thuộc tính global
  • Thêm directives/filters/transitions global
  • Thêm component options global

Xem thêm tại https://vuejs.org/v2/guide/plugins.html

Bắt đầu

Cài đặt thư viện notie

yarn add notie

Viết plugin

Trước tiên ta tạo một file plugins/vue-notie.js và khởi tạo code như sau:

Tiếp theo chúng ta sẽ import và gọi plugin.

Bây giờ chúng ta sẽ viết tất cả các method cần thiết trong Vue.mixin(). Việc sử dụng mixin giúp chúng ta có thể khai báo các chức năng tái sử dụng cho Vue components (https://vuejs.org/v2/guide/mixins.html).

Trong bài viết này chúng ta chỉ cần dùng hàm alert của notie. Vì vậy chỉ cần import hàm alert là đủ.

Xem thêm các hàm được hỗ trợ bởi notie tại đây

Mục đích của plugin này là tạo ra các hàm hiển thị notification, vì vậy chúng ta chỉ cần khai báo methods trong mixin.

Cứ tiếp tục như vậy, chúng ta viết tiếp các hàm như: $_vuenotie_warning, $_vuenotie_error, $_vuenotie_infor

Sử dụng trong component

Sử dụng inline trong HTML

Hoặc:

Kết quả và lời kết

Bài viết này giúp bạn có những khái niệm cơ bản nhất và tập làm quen với việc viết plugin cho Vuejs. Bạn có thể nghĩ ra nhiều ý tưởng hay cho plugin và áp dụng những kỹ thuật trên.