기록
vue/nuxt Plugin has already been applied to target app. 경고 문구 본문
Primevue autoImport: false로 설정한 이후로,(이슈)
primevue의 toast 컴포넌트를 사용하려고 할 때 ToastService를 불러오지 못하여 직접 플러그인 파일을 생성하여 nuxt.config.ts에 적용하였다.
// /plugins/primevue-toast.ts
import Toast from "primevue/toast";
import ToastService from "primevue/toastservice";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(ToastService);
nuxtApp.vueApp.component("pp-toast", Toast);
});
그런데 직접 등록한 ToastService가 중복 등록되면서 콘솔에 발생한 경고:
ssr:warn [Vue warn]: Plugin has already been applied to target app. at plugins/primevue-toast.ts
[Vue warn]: Plugin has already been applied to target app.
다음 조건을 추가하여 중복 등록되지 않도록 해결.
import Toast from "primevue/toast";
import ToastService from "primevue/toastservice";
export default defineNuxtPlugin((nuxtApp) => {
if (!nuxtApp.vueApp.config.globalProperties.$toast) {
nuxtApp.vueApp.use(ToastService);
}
nuxtApp.vueApp.component("pp-toast", Toast);
});
'TIL*' 카테고리의 다른 글
AWS EC2에 탄력적 IP 설정하고 무료도메인 연결하기 (0) | 2024.11.19 |
---|---|
vue.js nuxt.js IntersectionObserver 사용하여 무한 스크롤 구현하기 (0) | 2024.11.01 |
Rocky Linux 설치하기(Mac M1) (0) | 2024.09.17 |
PWA 푸시알림 구현하기(Next.js + PWA + Push Notification + Supabase) - 2 (0) | 2024.08.21 |
모바일 환경의 콘솔로그를 pc에서 확인하기(Mac, iPhone) (0) | 2024.08.19 |
Comments