개발 환경

**vite + vue + typescript**

왜 사용하나?

우리가 Vue 프로젝트를 하다 보면 전역 컴포넌트를 사용하는 일이 생긴다.

또 플러그인으로 전역적으로 컴포넌트를 등록하는 일도 있다. (router, vuetify, pinia 등)

이러한 전역 컴포넌트 사용 할 때 자동완성 기능의 도움을 받을려면 전역 컴포넌트에 대한 타입을 설정해주어야 한다.

RouterView가 자동완성으로 표시되고 있다.

전역 컴포넌트 타입 등록

components.d.ts

Router를 Plugin 등록하여 사용하면 RouterLink, RouterView를 전역적으로 사용 가능 한데,

이 두 Component 타입을 전역적으로 등록하기 위해 아래와 같이 작성한다.

// components.d.ts
import '@vue/runtime-core'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

이러한 전역 타입 설정을 자동으로 하도록 도와주는 package가 unplugin-vue-components이다.

❗과거 유사 패키지는 vite-plugin-components가 있다.

설치

공식문서

npm i -D unplugin-vue-components

설정

Build시 적용하기 위해선 Build tool에 적용해야 하는데, 다양한 Build tool에 적용이 가능하다.