Vue3 기초 예제 - Toast 팝업(Primevue)

사용자로부터 입력받는 간단한 페이지와 Primevue ToastService 사용 예제

*새로운 프로젝트로 진행

*API 관련 설명 생략

*자세한 설명 생략

 

 

▷ 프로젝트 전체 구조

 

 

▷ Primevue + ToastService 설치

*vue-cli를 통해 Project 생성 후 진행

 

💡npm install primevue

 

 

▷ Axios 설치

*vue-cli를 통해 Project 생성 후 진행

*API 통신을 위한 설치 생략 가능

 

💡npm install axios

 

 

▷ 기초 예제 - Toast 팝업

 

- main.js

*Primevue + ToastService 등록

/** Vue */
import { createApp } from 'vue'
import App from './App.vue'

/** PrimeVue */
import PrimeVue from 'primevue/config';
import 'primevue/resources/themes/lara-light-teal/theme.css'
import ToastService from 'primevue/toastservice';

createApp(App)
    /** 라이브러리 사용 등록 */
    .use(PrimeVue)
    .use(ToastService)
    
    /** 연결 */
    .mount('#app')

 

 

- App.vue

*컴포넌트 등록

<template>
  <div>
    <MsgSendCmp />
  </div>
</template>

<script>
import MsgSendCmp from '@/components/MsgSendCmp.vue'

export default {
  name: 'App',
  components: {
    MsgSendCmp
  }
}
</script>

 

 

- AxiosModule.js

*API를 위한 AxiosModule 생성

import Axios from "axios"

const API_SERVER = "http://IP:PORT";
const API_LIST = {

    "CMS-SEND-MSG": "/support/cmd",
}


function sendPost(API_URI, REQ_DATA) {
    return Axios
        .post(API_SERVER + API_URI, REQ_DATA)
        .then((res) => {
            return res.status
        })
        .catch((res) => {
            alert("잠시 후 다시 시도해주세요.")
            return res.status
        })
}

export {
    API_LIST,
    sendPost
}

 

 

- MsgSendCmp.vue

*사용자 입력을 받고, Send 클릭 시 Toast 팝업 생성

*전체 코드

*주석 이외 설명 생략

<template>
    <div style="top: 50%; left: 50%; transform: translate(-50%, -50%); position: fixed; text-align: center;">
        <h3>💌 Message</h3>
        <div>
            <Textarea v-model="msg" rows="5" cols="50" spellcheck="false" autoResize />
        </div><br />
        <div>
            <Button label="Primary" raised @click="sendMsg(msg)">Send</Button>
        </div>
    </div>
    <Toast />
</template>

<script setup>
/** Vue */
import { ref } from 'vue'

/** PrimeVue */
import Textarea from 'primevue/textarea';
import Button from 'primevue/button';

/** PrimeVue Toast */
import Toast from 'primevue/toast';
import { useToast } from "primevue/usetoast";

/** Axios */
import { API_LIST, sendPost } from '@/module/AxiosModule'


/** 사용자 입력 메세지 */
const msg = ref("")

/** Toast */
const eToast = useToast()
const sToast = useToast()

/** Send message */
async function sendMsg(msg) {
    // 입력 메세지 확인
    const blankCheck = msg.replace(/\s/g, '').length < 1
    if ("" == msg || blankCheck) { return setToast("9001") }

    // ID 확인
    if (null == localStorage.getItem("ID")) { return setToast("9002") }

    /* 요청 값 설정 */
    const REQ_DATA = {
        "src": "WAS",
        "dest": localStorage.getItem("ID"),
        "cmd": "Ctrl",
        "params": [msg]
    }

    /* CMS POST Send message API */
    const resVO = await sendPost(API_LIST['CMS-SEND-MSG'], REQ_DATA)
    if (resVO == 200) { setToast("0000") } else { setToast("9999") }
}

/** Toast 설정 */
function setToast(code) {
    if ("0000" == code) {
        sToast.add({
            severity: 'success',
            summary: 'Success',
            detail: 'Message has been send.',
            life: 1800
        })
    }
    if ("9001" == code) {
        eToast.add({
            severity: 'error',
            summary: 'Error',
            detail: 'Please write your message.',
            life: 1800
        })
    }
    if ("9002" == code) {
        eToast.add({
            severity: 'error',
            summary: 'Error',
            detail: 'Please write your ID.',
            life: 1800
        })
    }
    if ("9999" == code) {
        eToast.add({
            severity: 'error',
            summary: 'Error',
            detail: 'Server Error. please try again.',
            life: 1800
        })
    }
}
</script>

 

 

▷ 결과 확인

*http://localhost:8080/

 

① 초기 화면

 

② 메세지를 입력하지 않았을때, 메세지 전송 완료 시 Toast 팝업 확인

 

③ 반복 클릭 시 Toast 팝업 확인

 

 

▷ 참고

PrimeVue | Vue UI Component Library

 

 

▷ 관련 글

Vue3 기초 예제 프로젝트 정리

Vue3 기초 예제 - Local Storage