TIL*
vue/nuxt Plugin has already been applied to target app. 경고 문구
mnmhbbb
2024. 10. 16. 20:02
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);
});