014 - 토스트 메시지와 전역 에러 처리
남기용 1484

본격적으로 사이트를 만들기 전에 사용할 몇가지 플러그인들을 설치하고 세팅하도록 하겠습니다.

Vue 2에서 토스트 메시지를 사용하는 모듈로 Vue Toastification 모듈을 설치하고 사용해 봅시다.

yarn add vue-toastification

문서에 나온것 처럼 Vue 플러그인 세팅을 합니다.

다양한 옵션으로 사용하려면 토스트 메시지 데모 페이지를 참고하여 옵션을 설정합니다.

import Vue from "vue";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

const options = {
  position : 'bottom-center',
	timeout : 3000,
};

Vue.use(Toast, options);

main.js 에서 import 합니다.

Home.vue 파일에 예제 소스를 작성하여 잘 작동하는지 테스트 해봅니다.

Vue 전역 에러 핸들링

전역 에러 발생시 토스트 메시지를 보이도록 하겠습니다.

Vue.config.errorHandler = (e) => {
	console.error(e);
	if(Vue.$toast)
		Vue.$toast.error(e.message);
}

이렇게 하고 빌드를 한 후 서버쪽에서 접속을 하게 되면 에러가 발생됩니다.

Vue Toastification 플러그인은 클라이언트쪽에서만 동작하므로 Document 객체가 없어 발생하는 것이므로 이것은 서버쪽에서 렌더링 될때 포함되면 안되기 때문에 클라이언트쪽 렌더링할때 사용할 플러그인을 관리할 plugin-client 폴더를 생성 후 vue-toast.js 파일을 이동하고 entry-client.js 파일에서 import 합니다.

다시 빌드하고 테스트 해보세요.

Vue Plugin Toast 메세지
회원로그인 후 댓글을 작성하실 수 있습니다. 로그인
© 2024 ezcode all right reserved.