Vue3 - 간단한 토스트 알림 적용

vue3-toastify를  사용한 Vue 토스트 알림 적용

 

1. vue3-toastify 설치

npm install --save vue3-toastify
or
yarn add vue3-toastify

 

2. 소스적용

vue3 script setup 으로 사용

<template>
  <div>메인화면</div>
</template>

<script setup>
import { toast } from "vue3-toastify";
import "vue3-toastify/dist/index.css";

toast("메시지 부분", {
  theme: "auto",  // 테마(auto, light, dark, colored)
  type: "default", // 타입(info, success, warning, error, default)
  position: "top-center", //토스트 생성위치
  pauseOnHover: false, //마우스오버시 멈춤 제거
  autoClose: 1000,	//자동닫기 
  hideProgressBar: true, //로딩바제거
});
</script>

3. 화면 확인

 

데모 페이지를 통하여 필요한 Toast 얼럿 생성 가능

 

Demo URL
- https://vue3-toastify.js-bridge.com/

 

Document URL

- https://vue3-toastify.js-bridge.com/get-started/introduction.html