🌟 Awesome Vue.js
5 min read
awesomevuevuejsfrontendjavascriptcomponents
Vue.js 개발자를 위한 최고의 컴포넌트, 라이브러리, 도구 모음
🌟 Awesome Vue.js
Vue.js 개발자를 위한 최고의 컴포넌트, 라이브러리, 도구 모음 2025년 최신 트렌드와 검증된 도구들을 한곳에 모았습니다.
🧩 핵심 라이브러리
Vue 코어
- Vue 3 ⭐ 47k – 차세대 프로그레시브 프레임워크
- Vue 2 ⭐ 208k – 레거시 버전 (LTS 2023년 종료)
- Vue Router ⭐ 4k – 공식 라우팅 라이브러리
- Pinia ⭐ 13k – 공식 상태 관리 라이브러리
메타프레임워크
- Nuxt 3 ⭐ 55k – Vue 프로덕션 프레임워크
- Quasar ⭐ 26k – 하이브리드 앱 프레임워크
- VitePress ⭐ 13k – Vite 기반 정적 사이트 생성기
- Gridsome ⭐ 9k – Vue용 Jamstack 프레임워크
개발 도구
- Vite ⭐ 69k – 차세대 빌드 도구 (Vue 팀 제작)
- Vue DevTools ⭐ 25k – Vue 개발자 도구
- create-vue ⭐ 4k – Vue 프로젝트 스캐폴딩
- Storybook Vue ⭐ 84k – UI 컴포넌트 개발 도구
🎨 UI 컴포넌트
디자인 시스템
- Vuetify ⭐ 40k – Material Design 컴포넌트
- Element Plus ⭐ 25k – Vue 3 UI 라이브러리
- Naive UI ⭐ 16k – TypeScript 우선 UI 라이브러리
- PrimeVue ⭐ 10k – 엔터프라이즈급 UI 스위트
모바일 & 다목적
- Vant ⭐ 23k – 모바일 UI 컴포넌트
- Ionic Vue ⭐ 51k – 하이브리드 앱 UI
- NutUI ⭐ 6k – 모바일 UI 라이브러리
- Varlet ⭐ 5k – Material Design 모바일 UI
Headless UI
- Headless UI Vue ⭐ 26k – Tailwind의 스타일 없는 UI
- Radix Vue ⭐ 3k – Radix UI의 Vue 포트
- Oku UI ⭐ 1k – Vue용 Headless 컴포넌트
- Ark UI ⭐ 3k – Headless UI 컴포넌트
CSS 프레임워크 통합
🔀 상태 관리
전역 상태
서버 상태
- TanStack Query Vue ⭐ 42k – 서버 상태 관리
- SWRV ⭐ 2k – Vue용 SWR 데이터 페칭
- Vue Apollo ⭐ 6k – GraphQL 클라이언트
폼 상태
- VeeValidate ⭐ 11k – 폼 검증 라이브러리
- FormKit ⭐ 4k – 폼 작성 프레임워크
- Vuelidate ⭐ 7k – 모델 기반 검증
🛠️ 유틸리티
Composition Utilities
- VueUse ⭐ 20k – 필수 Composition 유틸리티 (100+ 함수)
- Vue Demi ⭐ 3k – Vue 2/3 호환 라이브러리 도우미
- @vueuse/head ⭐ 1k – 문서 head 관리
- @vueuse/motion ⭐ 1k – 애니메이션 유틸리티
국제화 (i18n)
- Vue I18n ⭐ 2k – 공식 i18n 라이브러리
- nuxt/i18n ⭐ 1.7k – Nuxt용 국제화
- Fluent Vue ⭐ 200 – Mozilla Fluent 통합
테이블 & 그리드
- TanStack Table Vue ⭐ 25k – Headless 테이블
- AG Grid Vue – 엔터프라이즈 데이터 그리드
- Vue Good Table ⭐ 2k – 강력한 테이블
📊 데이터 시각화
차트
- Vue ECharts ⭐ 10k – Apache ECharts 래퍼
- Vue Chart.js ⭐ 5k – Chart.js 래퍼
- Visx ⭐ 19k – D3 + React (Vue 어댑터 사용 가능)
3D & 그래픽
- TresJS ⭐ 2k – Three.js의 Vue 래퍼
- Vue GL ⭐ 600 – WebGL 컴포넌트
- Lunchbox.js ⭐ 200 – Three.js Vue 컴포넌트
🧪 테스팅
테스팅 프레임워크
- Vitest ⭐ 13k – Vite 네이티브 테스트 러너
- Vue Test Utils ⭐ 1k – 공식 테스트 유틸리티
- Testing Library Vue ⭐ 1k – 사용자 중심 테스트
- Jest ⭐ 44k – JavaScript 테스팅 프레임워크
E2E 테스팅
- Playwright ⭐ 67k – 브라우저 자동화
- Cypress ⭐ 47k – E2E 테스팅 프레임워크
- Nightwatch ⭐ 12k – E2E 테스트 자동화
🔧 개발 도구
린팅 & 포매팅
- ESLint Vue Plugin ⭐ 4k – Vue ESLint 규칙
- Prettier ⭐ 49k – 코드 포매터
- eslint-config-vue – Vue ESLint 설정
타입 시스템
- TypeScript ⭐ 101k – 타입 시스템
- Vue TSC ⭐ 6k – Vue TypeScript 컴파일러
- Volar ⭐ 6k – Vue Language Tools (VS Code)
빌드 도구
- Vue CLI ⭐ 30k – Vue 2 시대의 CLI (레거시)
- unplugin-vue-components ⭐ 4k – 자동 컴포넌트 임포트
📱 모바일 & 크로스플랫폼
네이티브 앱
- NativeScript Vue ⭐ 5k – 네이티브 모바일 앱
- Capacitor ⭐ 12k – 네이티브 앱 래퍼
- Tauri ⭐ 85k – 크로스플랫폼 데스크톱 앱
PWA
- Vite PWA ⭐ 3k – Vite PWA 플러그인
- @vueuse/pwa – PWA 유틸리티
📚 학습 자료
공식 문서
- Vue.js 공식 문서 – Vue 3 공식 가이드
- Nuxt 공식 문서 – Nuxt 3 공식 가이드
- Pinia 공식 문서 – Pinia 공식 가이드
- VueUse 문서 – VueUse 레퍼런스
온라인 학습
- Vue Mastery – Vue 전문 학습 플랫폼
- Vue School – Vue 비디오 코스
- Vue.js Korea – 한국어 Vue 커뮤니티
커뮤니티
- r/vuejs – Reddit Vue 커뮤니티
- Vue Discord – Vue 개발자 채팅
- Vue Land – Vue 공식 채팅
🆕 2025 Highlights
Vue 3.5+ 새 기능
- Reactive Props Destructure: 반응형 props 분해
- useTemplateRef: 템플릿 참조 개선
- Deferred Teleport: 지연된 텔레포트
- Custom Elements Improvements: 웹 컴포넌트 개선
Nuxt 3.x 혁신
- Nuxt UI Pro: 엔터프라이즈 UI 컴포넌트
- Nuxt Hub: 클라우드 플랫폼 통합
- Server Components: 서버 컴포넌트 지원
- Improved DX: 개발자 경험 강화
2025년 트렌드
- Vapor Mode: 컴파일러 기반 렌더링 (실험적)
- Pinia Colada: TanStack Query 스타일 데이터 페칭
- Vue Macros: 빌드 타임 매크로 확장
- UnJS Ecosystem: Nuxt 팀의 유니버설 JavaScript 도구
AI와 Vue
- GitHub Copilot: Vue 컴포넌트 자동 생성
- v0.dev: AI 기반 UI 생성 (Vue 지원)
- Cursor: AI 기반 Vue 개발 환경
한국 Vue 생태계
- 당근마켓: Vue + Nuxt 활용
- 직방: Vue 기반 부동산 플랫폼
- 왓챠: Vue.js 프론트엔드
- 클래스101: Vue 기반 학습 플랫폼
🔄 Vue 2 → Vue 3 마이그레이션
주요 변경사항
- Composition API: Options API와 병행 사용 가능
- Teleport: Portal에서 이름 변경
- Fragments: 다중 루트 노드 지원
- Suspense: 비동기 의존성 처리
마이그레이션 도구
- Vue 3 Migration Guide – 공식 마이그레이션 가이드
- @vue/compat – Vue 3 호환 빌드
- vue-codemod – 코드 자동 변환
콘텐츠 업데이트 요청은 요청 게시판에 써주세요