소개하기

Nuxt UI 란 무엇입니까?

Reka UI, Tailwind CSS 및 Tailwind Variants에 구축된 최신 Vue UI 컴포넌트 라이브러리로, 125+ Inertia 컴포넌트와 함께 아름답고 액세스 가능한 애플리케이션을 제공합니다.

Tailwind CSS를 사용하여 Vue 프로젝트를 구축하는 경우 Nuxt UI는 기본적으로 사용할 수 있는 높은 수준의 구성요소(데이터 테이블, 양식, 오버레이, 탐색)를 제공하며 필요할 때 고급 사용자 정의를 허용합니다.

v4의 새로운 기능은?

Nuxt UI v4는 주요 이정표를 표시합니다 : Nuxt UI와 Nuxt UI Pro는 이제 125 + 프로덕션 준비 구성 요소와 완전한 Figma 키트로 구성된 단일 완전한 오픈 소스 및 무료 라이브러리로 통합되었습니다.

v3에서 v4로의 마이그레이션은 v2에서 v3으로의 마이그레이션보다 훨씬 원활합니다. migration guide에서 자세히 알아보십시오.

core 기술

Nuxt UI는 세 가지 기초 위에 구축되었습니다: 행동과 접근성을 위한 Reka UI, 스타일을 위한 Tailwind CSS, 그리고 변형을 작성하기 위한 Tailwind Variants

Reka UI 사용자

Nuxt UI는 Reka UI 위에 구성 요소의 기초로 구축됩니다.

• WAI-ARIA Compliance: WAI-ARIA 저작 실습 를 적절한 의미 및 역할로 따릅니다.
• Keyboard Navigation: 탭 및 대화 상자와 같은 복잡한 구성 요소를 위한 키보드 지원 내장
• Focus Management: 사용자 상호 작용에 따라 포커스를 이동하는 지능형 포커스 처리
• Accessible Labels: 화면 판독기에 대한 레이블 컨트롤을 단순화하는 추상화

TAILWIND CSS (Tailwind CSS)

Nuxt UI는 최신 Tailwind CSS를 통합하여 크게 개선되었습니다.

• 5x 더 빠른 빌드: 전체 빌드 속도는 5배, 증분 빌드 속도는 100배 이상 빠릅니다.
• Unified Toolchain: 내장 가져오기 처리, 공급업체 사전 수정 및 구문 변환
• CSS-first Configuration: JavaScript가 아닌 CSS에서 직접 사용자 정의 및 확장
• Modern Web Feature: 컨테이너 쿼리, 계단식 레이어, 넓은 영역 색상 등

Tailwind 변이체

Nuxt UI는 Tailwind Variants를 활용하여 강력한 설계 시스템을 제공합니다.

• Dynamic Styling: 강력한 API를 갖춘 유연한 컴포넌트 변형
• Type Safety: 완전한 TypeScript 지원 자동 완성
• Conflict Resolution: 충돌하는 스타일의 효율적인 병합

Key의 기능

Ecosystem 통합

Nuxt UI는 SSR과 호환되며 생태계와 완벽하게 통합됩니다.

Vue 호환성 (Nuxt 옵션)

Nuxt UI는 Nuxt 뿐만 아니라 Vue 프로젝트에서도 작동합니다. Vite와 Vue 플러그인을 구성에 추가하기만 하면 됩니다.

• Auto-imports: 구성 요소와 합성 파일을 자동으로 가져오고 전역적으로 사용할 수 있습니다.
• Design System : 사용자 정의 색상, 크기, 변형 등을 갖춘 전체 테마 지원
• Developer Experience: IntelliSense를 통한 TypeScript 지원 및 자동 완성

TypeScript 지원 지원

Nuxt UI는 탁월한 개발자 경험을 위해 포괄적인 TypeScript 통합을 제공합니다.

• Auto-completion: 모든 컴포넌트 소품, 슬롯 및 이벤트에 사용
• **일반 컴포넌트 **: Vue Generics 사용
• Type-safe Theming: app.config.ts에서
• IntelliSense: 전체 코드베이스 전체

Templates 파일

Nuxt UI는 Nuxt 및 Vue 모두에 대한 프로덕션 준비 템플릿을 제공하여 빠르게 시작할 수 있도록 도와줍니다.

xph177Nuxt 템플릿: Starter, Landing, Docs, SaaS)))https://saas-template.nuxt.dev)https://docs-template.nuxt.dev), dashboardph189x, dashboard190xph190https://saas-template.nuxt.devph192xph192)ph193https://starter-template.nuxt.devph180https://starter-template.nuxt.dev, dashboardfolix, dashboard182[ph182xph182), dashboard182xph Changelog, Editor, Calendar 및 )

• Vue 템플릿: [Starter](https://starter-vue-template.nuxt.devxph24x, [Dashboard](xph27xxph28x 및 Chat

FAQ 질문