헤더 및 텍스트
제목, 단락, 텍스트 서식 및 링크를 사용하여 최적의 가독성을 제공합니다.
Headings 파일
제목을 사용하여 내용을 구성하고 쉽게 읽을 수 있습니다.
제목은 id가 있을 때 앵커 링크로 래핑될 수 있으며, H2 및 H3에 대한 해시 아이콘이 hover에 표시되어 있으므로 독자가 섹션에 직접 연결할 수 있습니다.
앵커 링크는 @nuxt/content를 사용하는 경우 H2에서 H4까지 기본적으로 활성화되고, 다른 경우에는 Comark가 포함되어 있습니다. Theme 구성 요소를 anchor 섹션과 함께 사용하여 응용 프로그램의 prop 섹션을 전환합니다.
<template>
<UTheme :props="{ prose: { h2: { anchor: true }, h3: { anchor: true }, h4: { anchor: true } } }">
<!-- your rendered markdown -->
</UTheme>
</template>
@nuxt/content를 사용하는 경우 H2, H3 및 H4에 대한 앵커 링크가 기본적으로 활성화됩니다. generation(예: AI 채팅 인터페이스에 대해 비활성화) 및 [toc generation](xph03032x를 제어할 수 있습니다.nuxt.config.ts
export default defineNuxtConfig({
content: {
renderer: {
anchorLinks: false
},
build: {
markdown: {
toc: {
depth: 3
}
}
}
}
})
헤더 1
Nuxt UI 사용자
# Nuxt UI
app.config.ts
export default defineAppConfig({
ui: {
prose: {
h1: {
slots: {
base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
link: 'inline-flex items-center gap-2'
}
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
h1: {
slots: {
base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
link: 'inline-flex items-center gap-2'
}
}
}
}
})
]
})제목 2
## What's new in v4?
app.config.ts
export default defineAppConfig({
ui: {
prose: {
h2: {
slots: {
base: [
'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
'[&>a>code]:transition-colors'
],
leading: [
'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
}
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
h2: {
slots: {
base: [
'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
'[&>a>code]:transition-colors'
],
leading: [
'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
}
}
}
}
})
]
})헤더 3
### Enhanced components
app.config.ts
export default defineAppConfig({
ui: {
prose: {
h3: {
slots: {
base: [
'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
'[&>a>code]:transition-colors'
],
leading: [
'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
}
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
h3: {
slots: {
base: [
'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
'[&>a>code]:transition-colors'
],
leading: [
'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
}
}
}
}
})
]
})제목 4
#### Getting started
app.config.ts
export default defineAppConfig({
ui: {
prose: {
h4: {
slots: {
base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3',
link: ''
}
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
h4: {
slots: {
base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3',
link: ''
}
}
}
}
})
]
})Text 형식
명확한 단락과 일관된 텍스트 형식으로 내용을 구성하여 읽기 쉽도록 합니다.
단락
Nuxt UI는 일관된 디자인과 향상된 사용자 경험을 가진 현대적이고 접근 가능한 응용 프로그램을 빌드하기 위한 Vue 구성 요소, 합성 가능 및 유틸리티의 포괄적 인 컬렉션을 제공합니다.Nuxt UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.
Nuxt UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.
app.config.ts
export default defineAppConfig({
ui: {
prose: {
p: {
base: 'my-5 leading-7 text-pretty'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
p: {
base: 'my-5 leading-7 text-pretty'
}
}
}
})
]
})강한
강력한 text
**Strong text**
app.config.ts
export default defineAppConfig({
ui: {
prose: {
strong: {
base: ''
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
strong: {
base: ''
}
}
}
})
]
})Emphasis (영어)
강조 텍스트
*Emphasized text*
app.config.ts
export default defineAppConfig({
ui: {
prose: {
em: {
base: ''
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
em: {
base: ''
}
}
}
})
]
})링크 링크
링크를 생성하려면 링크 텍스트를 대괄호로 묶고 URL을 괄호로 묶습니다. 외부 링크 및 내부 링크에 모두 적용됩니다.
[Nuxt documentation](https://nuxt.com)
app.config.ts
export default defineAppConfig({
ui: {
prose: {
a: {
base: [
'text-primary border-b border-transparent hover:border-primary font-medium rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary',
'transition-colors [&>code]:transition-colors'
]
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
a: {
base: [
'text-primary border-b border-transparent hover:border-primary font-medium rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary',
'transition-colors [&>code]:transition-colors'
]
}
}
}
})
]
})Blockquotes 코드
따옴표를 사용하여 중요한 정보 또는 따옴표를 강조 표시합니다.
Nuxt UI는 테마 설정에 자동으로 적응하여 전체 응용 프로그램에서 일관된 타이포그래피를 보장합니다.
> Nuxt UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.
app.config.ts
export default defineAppConfig({
ui: {
prose: {
blockquote: {
base: 'border-s-4 border-accented ps-4 italic'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
blockquote: {
base: 'border-s-4 border-accented ps-4 italic'
}
}
}
})
]
})Horizontal 규칙
가로 규칙을 사용하여 내용 섹션을 시각적으로 구분합니다.
---
app.config.ts
export default defineAppConfig({
ui: {
prose: {
hr: {
base: 'border-t border-default my-12'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
hr: {
base: 'border-t border-default my-12'
}
}
}
})
]
})