KEREN!! - MENGGUNAKAN TOAST NOTIFICATION DI VUE.JS 3 DENGAN VUE3-TOASTIFY

Halo sobat coding!

Kali ini admin ingin membagikan cara untuk menampilkan toast notifikasi atau pesan pemberitahuan yang dapat diterapkan di project Vue 3 dan dapat dikustomisasi sesuai selera dan tentunya tidak sulit.

Sebelumnya, mari kita bahas sedikit tentang Vue JS. Vue JS adalah salah satu framework frontend open-source berbasis javascript yang digunakan untuk pembangunan atau pengembangan sebuah website atau tampilan ui (user interface). Selain itu, dengan Vue JS ini, kita dapat juga membuat sebuah SPA atau Single Page Application. Vue JS (saat penulisan artikel ini), dapat dikatakan sebagai salah satu framework yang cukup populer dikalangan developer. Tentunya, framework ini sangatlah mudah dipelajari dan digunakan. Saat ini, sudah banyak komunitas dari Vue JS yang dapat membantu saat kita membuat atau mendevelop sebuah aplikasi Vue JS. Vue 3 merupakan salah satu versi terbaru dari Vue JS saat penulisan artikel ini.

Oya, dengan Vue JS ini juga, kita bisa membuat website PWA. PWA merupakan singkatan dari Progressive Web Applicaion, yakni suatu aplikasi web yang menawarkan pengalaman pengguna untuk merasakan aplikasi web seperti aplikasi native. Aplikasi native adalah aplikasi mobile yang dibuat khusus untuk sistem operasi tertentu, misalnya Android atau iOS. Intinya, dengan penerapan PWA, web kita secara otomatis bisa juga di 'download' untuk menjadi aplikasi di handphone/desktop kita. Jadi, setiap kali kita ingin membuka web, tidak perlu masuk ke browser lalu ketik url tujuan, melainkan dapat dilakukan hanya dengan klik aplikasi yang sudah ter'download' tadi. Kalau belum jelas mengenai PWA, silakan mencari tahu lebih lanjut di mbah gugel ya.. hehe

Oke, kita masuk pada inti pembahasan kita, yakni mengenai toast notifikasi di Vue 3. Dilansir dari getbootstrap.com, Toast adalah notifikasi ringan yang dirancang untuk meniru notifikasi push yang telah dipopulerkan oleh sistem operasi seluler dan desktop. Ga usa panjang lebar penjelasannya ya, intinya toast ini kurang lebih hasilnya sebagai berikut,

Keren? Menarik? Ya, ini yang akan admin bahas mengenai instalasi dan penerapannya. Langsung saja kita masuk ke pembahasan lebih dalamnya mengenai instalasi dan penerapan toast notifikasi di Vue 3.

INSTALASI DAN PENERAPAN TOAST NOTIFICATION DI VUE JS 3 MENGGUNAKAN LIBRARY VUE3-TOASTIFY

vue3-toastify adalah library toast notifikasi yang mudah digunakan dan sangat dapat disesuaikan untuk aplikasi Vue 3. Sebelum melanjutkan, pastikan requirement berikut terpenuhi ya agar nantinya toast berjalan sebagaimana mestinya!

vue version >= 3.2.0
Jika kalian sudah ada project Vue, bisa lihat di file package.json bagian dependencies. Disana tertera versi dari vue yang digunakan.

Setelah memastikan requirement tersebut terpenuhi, mari kita masuk pada langkah instalasi dan penerapan. cekidot!

Install library vue3-toastify. Buka cmd dan arahkan path pada project Vue. Lalu ketikkan perintah berikut:
```
npm install --save vue3-toastify
```
kurang lebih tampilan hasil dari npm install --save vue3-toastify

Setelah berhasil instal, buka file src/main.js lalu import vue3-toastify dan deklarasikan di .use(). (lihat pada yang ditebalkan)

Jika menggunakan JavaScript

import { createApp } from 'vue';
import Vue3Toasity from 'vue3-toastify';
import App from './App.vue';
import { loadFonts } from './plugins/webfontloader';
import 'vue3-toastify/dist/index.css';

loadFonts();

createApp(App)
  .use(Vue3Toasity, {
    autoClose: 5000,
  })
  .mount('#app');

Jika menggunakan TypeScript

import { createApp } from 'vue';
import Vue3Toasity, { typeToastContainerOptions } from 'vue3-toastify';
import App from './App.vue';
import { loadFonts } from './plugins/webfontloader';
import 'vue3-toastify/dist/index.css';

loadFonts();

createApp(App)
  .use(Vue3Toasity, {
    autoClose: 5000,
  } as typeToastContainerOptions, )
  .mount('#app');

didalam .use() terdapat deklarasi autoClose. Isi nilai waktu dalam milidetik yang diinginkan untuk toast muncul. Dalam contoh tersebut, gw menuliskan autoClose: 5000, yang berarti toast akan muncul selama 5 detik dan setelah itu menghilang.

Setelah itu, tinggal gunakan toast nya. Caranya import terlebih dahulu { toast } dari vue3-toastify lalu gunakan dengan perintah:

toast("A basic toast message", {
   // toast options here
});

Contoh aneka penerapannya:

<template>
  <div>
    <button click="notify">Notify !</button>
  </div>
</template>
<script>
import { toast } from 'vue3-toastify';

export default {
  name: 'App',
  methods: {
    notify() {
      toast("Default Notification !"); //untuk toast default

      toast.success("Success Notification !", {
        position: toast.POSITION.TOP_CENTER,
      }); //untuk toast jenis sukses

      toast.error("Error Notification !", {
        position: toast.POSITION.TOP_LEFT,
      }); //untuk toast jenis error

      toast.warn("Warning Notification !", {
        position: toast.POSITION.BOTTOM_LEFT,
      }); //untuk toast jenis warning

      toast.info("Info Notification !", {
        position: toast.POSITION.BOTTOM_CENTER,
      }); //untuk toast jenis info

      toast("Custom Style Notification with css class!", {
        position: toast.POSITION.BOTTOM_RIGHT,
        className: 'foo-bar',
      });  //untuk custom toast
    }
  }
}
</script>
<style>
   .foo-bar { color: #f00; }
</style>

Berikut ini untuk toast options yang dapat digunakan

/**
 * support multiple
 * @default true
 */
multiple?: boolean;
/**
 * use like
 * ```
 * toast.info("Hello World.\n I am <b>Tom</b>", { dangerouslyHTMLString: true });
 * ```
 */
dangerouslyHTMLString?: boolean;
/**
 * Support right to left content
 * @default false
 */
rtl?: boolean;
/** Used to identify the ToastContainer when working with multiple container. Also used to set the id attribute */
containerId?: Id;
/**
 * One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
 * @mark {@link ToastPosition}
 * @default 'top-right'
 */
position?: ToastPosition;
/**
 * Delay in ms to close the toast. If set to false, the notification needs to be closed manually
 * @default 5000
 */
autoClose?: number | boolean;
/**
 * Pass a custom close button.
 * To remove the close button pass `false`
 */
closeButton?: CloseBtnType;
/**
 * A reference to a valid react-transition-group/Transition component
 * @default 'bounce'
 */
transition?: ToastTransition | CSSTransitionProps;
/**
 * Display or not the progress bar below the toast(remaining time)
 * @default false
 */
hideProgressBar?: boolean;
/**
 * Keep the timer running or not on hover
 * @default true
 */
pauseOnHover?: boolean;
/**
 * Pause the timer when the window loses focus
 * @default true
 */
pauseOnFocusLoss?: boolean;
/**
 * Dismiss toast on click
 * @default true
 */
closeOnClick?: boolean;
/**
 * Add optional classes to the toast wrapper
 * @default -
 */
toastClassName?: string; // TODO: ToastClassName
/**
 * Add optional classes to the TransitionGroup container
 * @default ''
 */
bodyClassName?: string; // TODO: ToastClassName
/**
 * Add optional inline style to the container
 * @default {}
 */
style?: CSSProperties;
/**
 * Add optional classes to the progress bar
 * @default -
 */
progressClassName?: string; // TODO: ToastClassName
/**
 * Add optional inline style to the progress bar
 * @default {}
 */
progressStyle?: CSSProperties;
/**
 * Define the ARIA role for the toasts
 * @default 'alert'
 */
role?: string;
/**
 * One of auto, light, dark, colored
 * @description `auto` means automatically detects system theme colors
 * @mark {@link ToastTheme}
 * @default 'auto'
 */
theme?: ToastTheme;

Tampilan toast:
Demo
https://vue3-toastify.netlify.app/

Itulah langkah-langkah instalasi dan penerapan dari toast notifikasi di project Vue 3 dengan menggunakan library vue3-toastify. Untuk melihat dokumentasi resminya, bisa lihat di sini.

Sekian artikel dari admin. Selamat mencoba dan semoga berhasil! Jika ada pertanyaan silakan tanyakan pada kolom komentar. Terima kasih dan salam coding!👋