[Vue & TS] 자동 컴포넌트 import 및 전역 타입 생성 하기(With. Vite)

개발 환경

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에 적용이 가능하다.

Vite 적용 예시를 보겠다.

vite.config.js

// vite.config.js
import { fileURLToPath, URL } from 'url';
import Components from 'unplugin-vue-components/vite'; // vite를 붙여준다.
import { Vuetify3Resolver } from 'unplugin-vue-components/resolvers'

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [
			vue(),
			Components({
				dirs: ['src/components'], 
				dts: true, // component.d.ts 자동 생성
				resolvers: [Vuetify3Resolver()], // vuetify 컴포넌트 등록시 resolver 사용
			}),
		],
  ...
});

plugins에 Components를 추가한다.

dirs

Component를 찾을 경로, 해당 경로 하위에 Component들은 component.d.ts 에 등록 된다.

dts

typescript 프로젝트 인 경우 component.d.ts 를 자동으로 생성해준다.

 

적용 확인

# 개발 서버 실행, 프로젝트마다 실행 스크립트 명령어는 다를 수 있음
npm run dev

개발 서버를 실행했을 때 components.d.ts 가 생성된다면 성공한 것이다.

(component를 신규로 생성했을 때도 생겼었다.)

 

관련 내용

unplugin 시리즈 중 같이 사용되는 것이 unplugin-auto-import 이다.

관련해서 정래해놓은 글은 여기를 참조

 

끝 😁

 

공식 문서

https://github.com/antfu/unplugin-vue-components