[筆記] PrimeVue4 忽略 PrimeVue 的 computed Property 警告 @地瓜大的飛翔旅程

章節連結

內容

由於 PrimeVue4 搭配 Chrome DevTool 的 Pinia 預覽進行開發時，會觸發 Vue 的內部警告系統，導致你在 Console 看見一串的 Computed property xxx is already defined in Props 錯誤。雖說於正式環境下無影響，但在開發時頻繁出現總是很惱人。這邊筆記下不要輸出這些錯誤的方法。

內容

撰寫一個 NuxtPlugin 即可，將原先的 warnHandler 給保留，加入一點客製化的判斷來排除。

export default defineNuxtPlugin((nuxtApp) => {
  if (import.meta.dev && import.meta.client) {
    const { vueApp } = nuxtApp
    const originalWarnHandler = vueApp.config.warnHandler

    vueApp.config.warnHandler = (msg, instance, trace) => {
      // 直接忽略所有 PrimeVue 的 computed property 警告
      if (msg.includes('Computed property') && msg.includes('is already defined in Props.')) {
        return
      }

      if (originalWarnHandler) {
        originalWarnHandler(msg, instance, trace)
      } else {
        console.warn(msg, instance, trace)
      }
    }
  }
})