기록

vue/nuxt Plugin has already been applied to target app. 경고 문구 본문

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);
});

 

Comments