Vuetify "$attrs is readonly" and "$listeners is readonly" Error

오류 : vue와 Vuetify가 Webpack 동일한 방법으로 처리가 안돼서 나오는 에러 인거 같음...

-> 내 생각엔 싱글페이지로 하나의 app에서 실행해야 하는데 뷰티파이와 뷰의 라우터기능이 각각 다른 어플리케이션에서 작동하는거 같음. 

 

해결 :  Vue와 Vuetify가 webpack에서 동일한 방식으로 처리되도록하는 것입니다 externals. 예를 들어 let whiteListedModules = ['vue', 'vuetify']이러한 vuetify webpack 빌드 의 줄에 둘 다 넣거나 둘 다 넣지 않는 것.

// vue.config.js

module.exports = {
  configureWebpack : { 
    externals : { 
      vue : 'Vue' , 
      vuetify : 'Vuetify' 
    } 
  },
  devServer: {
    disableHostCheck:true,
  },
  transpileDependencies: [
    "vuetify"
  ]
}

 

 

참고 : github.com/vuetifyjs/vuetify/discussions/4068

[Bug Report] "$attrs is readonly" and "$listeners is readonly" console messages. · Discussion #4068 · vuetifyjs/vuetify