프로젝트 소개
Nuxt UI는 Reka UI, Tailwind CSS 및 Tailwind Variants를 결합한 Vue 및 Nuxt용 UI 라이브러리입니다. 이 라이브러리의 목표는 개발자에게 정교하고 접근 가능하며 성능이 뛰어난 사용자 인터페이스를 구축할 수 있는 도구를 제공하는 것입니다.
저장소 상태: 이 README는 v4 브랜치에 있으며, 이전 주요 버전을 위해 별도의 v3 및 v2 브랜치가 유지 관리됩니다. 공개 문서는 ui.nuxt.com에서 확인할 수 있습니다.
설치
- 패키지는 tailwindcss와 함께 @nuxt/ui로 설치되며, pnpm, yarn, npm 및 bun 명령어가 제공됩니다.
- Nuxt의 경우: nuxt.config.ts의 modules 배열에 '@nuxt/ui'를 등록하고, css를 ~/assets/css/main.css와 같은 스타일시트로 지정합니다.
- 일반 Vue의 경우: vite.config.ts에 @vitejs/plugin-vue와 함께 Nuxt UI Vite 플러그인(@nuxt/ui/vite)을 추가한 다음, 앱 진입 파일에서 Vue 플러그인(@nuxt/ui/vue-plugin)을 등록합니다. 예시에서는 vue-router를 사용하여 라우터가 생성됩니다.
- 두 설정 모두 CSS 진입점에서 "tailwindcss"를 먼저 가져온 후 "@nuxt/ui"를 가져옵니다.
- Nuxt 및 Vue를 위한 전용 설치 가이드가 제공됩니다.
템플릿
사용 가능한 템플릿 세트와 공식 템플릿 페이지 링크가 제공됩니다: Starter(최소 시작 지점), Landing(Nuxt Content 기반 랜딩 페이지), Docs(Nuxt Content 기반 문서 사이트), SaaS(Nuxt Content 기반 랜딩, 가격, 문서 및 블로그), Dashboard(다중 열 레이아웃), Chat(Vercel AI SDK 기반의 GitHub 인증 및 지속적 채팅 기록을 갖춘 AI 챗봇), Portfolio(Nuxt Content 기반 포트폴리오 및 블로그), Changelog(Nuxt MDC 기반의 GitHub 저장소 릴리스 노트 표시), Editor(마크다운, HTML 및 JSON 콘텐츠 유형을 지원하는 TipTap 기반 리치 텍스트 에디터), Calendar(드래그 앤 드롭 및 낙관적 업데이트가 포함된 일, 주, 월 보기).
기여 및 개발
기여자는 프로젝트의 보고 및 기여 가이드를 통해 버그를 보고하고 제안을 제출할 수 있습니다. AGENTS.md 파일은 AI 코딩 어시스턴트를 위한 기여 가이드라인을 제공하며, 컴포넌트 구조, 테마 패턴, 테스트 컨벤션 및 문서화 가이드라인을 다룹니다. 이는 AI 코딩 에이전트가 자동으로 인식하도록 설계되었습니다. 로컬 개발 환경 설정 지침은 기여 문서에서 링크로 제공됩니다.
nuxt/nuxt, nuxt/icon, nuxt/fonts, nuxt-modules/color-mode, unovue/reka-ui, tailwindlabs/tailwindcss 및 vueuse/vueuse에 감사를 표합니다. 이 프로젝트는 MIT 라이선스 하에 제공됩니다.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.