본격적으로 사이트를 만들기 전에 사용할 몇가지 플러그인들을 설치하고 세팅하도록 하겠습니다.
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
합니다.
다시 빌드하고 테스트 해보세요.
회원로그인 후 댓글을 작성하실 수 있습니다. 로그인