Vue2, Vue3 에서 지원되는 라이브러리를 만들어 보자

개요

• 디자인 시스템을 만들 때, 컴포넌트 모듈화를 하고 싶다는 생각이 들었다
  • 마치 Vuetify 와 같은 사내 라이브러리를 만들고 싶었다
• 하지만 사내 기술은 Nuxt2 로 이루어지고 있었다
• Vue2 만 지원하기엔, Vue2 에 대한 지원이 끊기고, 앞으로 나아가야 할 방향은 Vue3 이기 때문에 vue2, vue3 둘 다 지원이 필요했다

삽질

다른 라이브러리들은 Vue 버전을 어떻게 지원하는걸까?

• quasar:: 3버전부터는 vue3 만 지원
• Vuetify:: 3버전부터는 vue3 만 지원

ㅜㅜ 진짜 없는걸까

새로운 라이브러리를 발견

https://github.com/vueuse/vue-demi

열심히 구글링하다 보니 vue-demi 라는 것을 발견함

description 에 적혀있듯이, Vue2 와 Vue3 를 위한 라이브러리를 생성하자 << 라는 목표가 담긴 라이브러리임

vue demi 의 dependencies

• vue 가 적어도 2.7 이상은 되어야 하고, 2.6 이하면 설치하는 쪽에서 composition api 를 깔아줘야 한다

일단 해보자

일단 진짜 안 되는지 vue3 로 npm publish 를 한 뒤, vue3 와 vue2 모두 적용해 보자

vue3 는 일단 적용이 되는데,
vue2 는 아래와 같은 에러가 뜬다

이로써 vue3 과 vue2 가 같이 쓸 수 없다는 것이 증명이 되었다

일단 해보자2

그렇다면 vue demi 를 위한 설정을 하고 되는지 확인해 보자

• 3 > 정상
• 2.7 > 정상
• 2.6 > 정상

css 가 안 먹는 증상이 있기는 한데, 일단 스킵하도록 하자 되긴 되니깐… ^_ㅠ

vue-demi 를 쓰고 있는 라이브러리가 여러개면 서로 충돌이 생기기도 하는 것 같다. 요건 나중에 다시 봐야 할듯?