Vue 3 Global Properties and Typescript

기존 v2에서는 prototype에 변수나 모듈을 정의하면 this 키워드를 이용하여 접근할 수 있었는데 v3 부터는 config의 globalProperties에 정의를 하도록 변경되었습니다.

1
2
3
4
5
6


// Before
Vue.prototype.$http = () => {}

// After
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

Typescript를 쓰는 경우 ComponentCustomProperties 인터페이스에 정의하는 변수나 모듈에 대한 Type 선언이 필요합니다.

단, 기본으로 선언되는 일부 모듈(e.g. $router)에 대한 타입도 함께 선언해야 하는 것으로 보입니다.
참조 링크¹²

1
2
3
4
5
6


declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $http: Function;
    $router: Router;
  }
}