설치

템플릿 템플릿
Nuxt 응용 프로그램에서 Nuxt UI를 설치하고 구성하는 방법을 알아봅니다.Learn how to install and configure Nuxt UI in your Nuxt application.

Setup 설정

Nuxt 프로젝트에 추가

Nuxt UI 패키지 설치하기

pnpm add @nuxt/ui tailwindcss

xxnuxt.config.ts에 Nuxt UI 모듈 추가

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
Nuxt UI가 자동으로 등록하므로 @nuxt/icon, @nuxt/fonts 또는 @nuxtjs/color-mode를 modules 어레이에 추가할 필요가 없습니다. icon, fonts 및 colorMode 키를 사용하여 nuxt.config.ts에서 이러한 모듈을 구성할 수 있습니다.

Import Tailwind CSS 및 Nuxt UI CSS CSS에서

@import "tailwindcss";
@import "@nuxt/ui";
Nuxt Layers를 사용하는 경우 모듈은 각 레이어 디렉토리에 대해 @source 지시어를 자동으로 생성하여 Tailwind CSS가 모든 레이어 소스 파일에서 유틸리티 클래스를 검색합니다.
VSCode에 대한 Tailwind CSS IntelliSense 확장을 설치하고 다음 설정을 추가하는 것이 좋습니다.
.vscode/settings.json
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.classFunctions": ["defineAppConfig"]
}

App 구성 요소를 사용하여 앱 래핑

app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
App 구성 요소는 전역 구성을 설정하고 Toast, Tooltip 및 programmatic overlays에 필요합니다.

Nuxt 템플릿 사용하기

GitHub 또는 CLI에서 Use this template 버튼을 사용하여 official templates 중 하나를 시작하십시오.

npm create nuxt@latest -- -t ui

Starter

Nuxt UI를 시작하는 최소 템플릿입니다.

Landing

Nuxt Content 기반의 최신 랜딩 페이지 템플릿입니다.

Docs

Nuxt Content를 사용하는 문서 템플릿입니다.

SaaS

Nuxt Content로 구동되는 랜딩, 가격, 문서 및 블로그가 포함된 SaaS 템플릿입니다.A SaaS template with landing, pricing, docs and blog powered by Nuxt Content.

Dashboard

복잡한 관리 인터페이스를 구축하기 위한 다중 열 레이아웃이 있는 대시보드 템플릿입니다.

Chat

Vercel AI SDK로 구동되는 자신만의 챗봇을 구축하기 위한 AI 챗봇 템플릿.

Portfolio

Nuxt Content로 구동되는 작업, 기술 및 블로그를 보여주는 세련된 포트폴리오 템플릿입니다.A skill portfolio template to showcase your work, skills and blog powered by Nuxt Content.

Changelog

리포지토리를 표시하는 변경 로그 템플릿은 GitHub powered by Comark에서 노트를 릴리스합니다.A changelog template to display your repository releases notes from GitHub powered by Comark.

Editor

TipTap에 의해 제공되는 리치 텍스트 편집기 템플릿으로 markdown, HTML 및 JSON 콘텐츠 유형을 지원합니다.

Calendar

Apple 달력에 영감을 받은 템플릿으로 일, 주 및 월 보기, 드래그 앤 드롭 및 낙관적 인 업데이트가 제공됩니다.

Options 옵션

nuxt.config.ts에서 옵션을 제공하여 Nuxt UI를 사용자 정의할 수 있습니다.

prefix (### prefix)의 발음을 ### prefix

prefix 옵션을 사용하여 구성 요소의 접두어를 변경합니다.

  • 기본값: U
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    prefix: 'Nuxt'
  }
})

fonts

fonts 옵션을 사용하여 @nuxt/fonts 모듈을 활성화 또는 비활성화합니다.

  • Default: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    fonts: false
  }
})

colorMode 파일

colorMode 옵션을 사용하여 @nuxt/color-mode 모듈을 활성화 또는 비활성화합니다.

  • 기본값: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    colorMode: false
  }
})

theme.colors

theme.colors 옵션을 사용하여 구성요소 주제를 생성하는 데 사용되는 동적 색상 앨리어스를 정의합니다.

  • Default: ['primary', 'secondary', 'success', 'info', 'warning', 'error']
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      colors: ['primary', 'error']
    }
  }
})
각 별칭은 구성 요소 테마에 --ui-color-* 음영 및 변형의 전체 집합을 생성하며, 응용 프로그램에서 사용하는지 여부에 관계없이 색상 변형이 있습니다. 목록을 실제 사용하는 별칭으로 잘라내고, 유효성 검사 스타일이 의존하므로 양식을 사용하는 경우에는 error를 유지합니다.
테마 섹션에서 색상 사용자 정의 및 주제 지정에 대해 자세히 알아보십시오.

theme.transitions

theme.transitions 옵션을 사용하여 구성요소의 전환을 활성화하거나 비활성화합니다.

  • Default: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      transitions: false
    }
  }
})
이 옵션은 커서 또는 활성 상태가 있는 구성 요소에 transition-colors 클래스를 추가합니다.

theme.unstyled : badge{label="4.9+" class="align-text-top"}

theme.unstyled 옵션을 사용하여 구성 요소에서 모든 기본 테마 클래스를 제거하고 해당 구조와 class, ui 또는 app.config.ui를 통해 제공한 클래스만 유지합니다.

  • 기본값: false
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      unstyled: true
    }
  }
})
이것은 structural 클래스 (포지셔닝, 전환, 플렉스 / 그리드)를 제거하고, 단지 코스메틱 것이 아닙니다. Modal, Drawer 또는 Calendar와 같은 레이아웃이 무거운 구성 요소는 PrimeVue의 스타일이 지정되지 않은 모드와 유사하게 레이아웃을 다시 공급해야합니다.

theme.defaultVariants 파일

theme.defaultVariants 옵션을 사용하여 구성 요소의 기본 color 및 size 변형을 재지정합니다.

정확히 primary 또는 md인 기본값만 대체되므로 아바타는 color: 'neutral'를 유지하고 분리기는 size: 'xs'를 유지합니다.

  • Default: { color: 'primary', size: 'md' }
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      defaultVariants: {
        color: 'neutral',
        size: 'sm'
      }
    }
  }
})

theme.prefix : badge{label="4.2+" class="align-text-top"}

theme.prefix 옵션을 사용하여 Tailwind CSS 가져오기에서 설정한 것과 동일한 접두사를 구성합니다. 이렇게 하면 Nuxt UI 구성 요소가 올바른 접두사 유틸리티 클래스 및 CSS 변수를 사용할 수 있습니다.

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  }
})
@nuxt/fonts 모듈에서 접두사 옵션을 사용하려면 fonts.processCSSVariables를 활성화해야 할 수도 있습니다.You might need to enable fonts.processCSSVariables to use the prefix option with the @nuxt/fonts module:
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  },
  fonts: {
    processCSSVariables: true
  }
})

이것은 Nuxt UI 컴포넌트 테마의 모든 Tailwind 유틸리티 클래스와 CSS 변수에 자동으로 접두어를 추가합니다.

<!-- Without prefix -->
<button class="px-2 py-1 text-xs hover:bg-primary/75">Button</button>

<!-- With prefix: tw -->
<button class="tw:px-2 tw:py-1 tw:text-xs tw:hover:bg-primary/75">Button</button>
Tailwind CSS 설명서에서 접두사 사용에 대해 자세히 알아보십시오.

prose 파일

prose 옵션을 사용하여 @nuxtjs/mdc, @nuxt/content 또는 @comark/nuxt가 설치되어 있지 않은 경우에도 Nuxt UI Prose components 임포트를 강제로 수행합니다.

  • Default: false
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    prose: true
  }
})

mdc : badge{label="Deprecated" color="warning" class="align-text-top"}

대신 prose 옵션을 사용합니다.

content 사용자

content 옵션을 사용하여 @nuxt/content가 설치되지 않은 경우에도 Nuxt UI 산문 및 내용 구성 요소를 강제로 가져옵니다.

  • 기본값: false
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    content: true
  }
})

experimental.componentDetection: badge{label="4.1+" class="align-text-top"}

experimental.componentDetection 옵션을 사용하여 트리 셰이킹을 위한 자동 구성 요소 감지를 활성화합니다. 이 기능은 소스 코드를 스캔하여 실제로 사용되는 구성 요소를 감지하고 해당 구성 요소에 필요한 CSS만 생성합니다(종속성 포함).

  • 기본값: false
  • Type : boolean | string[]

**자동 감지 기능 활성화: **

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    experimental: {
      componentDetection: true
    }
  }
})

**동적 사용을 위한 추가 구성요소 포함: **

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    experimental: {
      componentDetection: ['Modal', 'DropdownMenu', 'Popover']
    }
  }
})
구성 요소 이름의 배열을 제공하면 자동 탐지가 활성화되고 이러한 구성 요소는 종속성과 함께 포함됩니다. 정적 분석이 불가능한 <component :is="..." />와 같은 동적 구성 요소에 유용합니다.

Continuous 버전

Nuxt UI는 pkg.pr.new를 사용하여 지속적인 미리 보기 릴리스를 제공하므로 개발자가 공식 릴리스를 기다리지 않고도 최신 기능과 버그 수정에 즉시 액세스할 수 있습니다.

v4 분기의 모든 커밋 및 PR에 대해 자동 미리 보기 릴리스가 생성됩니다. 패키지 버전을 특정 커밋 해시 또는 PR 번호로 대체하여 사용합니다.

package.json
{
  "dependencies": {
-   "@nuxt/ui": "^4.0.0",
+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
  }
}
pkg.pr.new는 설치 URL을 사용하여 PR에 자동으로 주석을 추가하여 변경 사항을 쉽게 테스트할 수 있습니다.

Introduction

Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.

Migration

A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.