Vue 2에 Vuetify와 TypeScript를 함께 적용하려는데, 시작하자마자 에러가 났습니다.

---

아래는 logue님이 만든 템플릿입니다. 이슈를 찾다가 발견했는데, Vue 2 + Vuetify + TypeScript로 개발한다면 참고하기 좋습니다.

vite-vue2-vuetify-ts-starter

설치 방법은 Vue 3와 같고, 버전만 Vue 2로 선택하면 됩니다. Vue TypeScript 설치 방법

ERROR in src/plugins/vuetify.ts:2:21

Vuetify 버전과 타입 설정이 맞지 않아 생기는 문제로 보입니다. 관련 이슈 (vuetifyjs/vuetify#12809)

해결 방법은 tsconfig.json의 types에 vuetify를 추가하고, vuetify 플러그인 파일의 import를 수정하는 것입니다.

tsconfig.json

    "types": [
      "webpack-env" , "vuetify" // vuetify 추가
    ],

plugins/vuetify.ts

import Vue from 'vue';
// import Vuetify from 'vuetify/lib/framework'; 
import Vuetify from 'vuetify'; // 상단의 vuetify를 현재위치의 코드로 변경

Vue.use(Vuetify);

export default new Vuetify({
});

이렇게 수정하면 에러가 해결됩니다.