# Nuxt UI Tasarım Sistemi

## Nuxt UI Tasarım Sistemi Arayüzü Önizlemesi

Örnek girdileri düzenleyin, bir kontrol listesi seçin, doğrulamayı ve sıfırlamayı inceleyin.

## Nuxt UI Tasarım Sistemi Tasarım Referansı

Nuxt UI 4.11.3 varsayılanları, derlenmiş çıktıda gerçekten kullanılan anlamsal CSS ve yerel Vue bileşen sözleşmeleri. Özgün düzen ve doğrulama tercihleri ayrıca belirtilmiştir.

### Varsayılan anlamsal renk takma adları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| primary | green | Gerçek Nuxt UI 4.11.3 varsayılan takma adı. Bileşenlerin renk özellikleri anlamsal adlara başvururken, yapılandırılmış palet bu adların değerlerini sağlar. |
| secondary | blue | Gerçek Nuxt UI 4.11.3 varsayılan takma adı. Bileşenlerin renk özellikleri anlamsal adlara başvururken, yapılandırılmış palet bu adların değerlerini sağlar. |
| success | green | Gerçek Nuxt UI 4.11.3 varsayılan takma adı. Bileşenlerin renk özellikleri anlamsal adlara başvururken, yapılandırılmış palet bu adların değerlerini sağlar. |
| info | blue | Gerçek Nuxt UI 4.11.3 varsayılan takma adı. Bileşenlerin renk özellikleri anlamsal adlara başvururken, yapılandırılmış palet bu adların değerlerini sağlar. |
| warning | yellow | Gerçek Nuxt UI 4.11.3 varsayılan takma adı. Bileşenlerin renk özellikleri anlamsal adlara başvururken, yapılandırılmış palet bu adların değerlerini sağlar. |
| error | red | Gerçek Nuxt UI 4.11.3 varsayılan takma adı. Bileşenlerin renk özellikleri anlamsal adlara başvururken, yapılandırılmış palet bu adların değerlerini sağlar. |
| neutral | slate | Gerçek Nuxt UI 4.11.3 varsayılan takma adı. Bileşenlerin renk özellikleri anlamsal adlara başvururken, yapılandırılmış palet bu adların değerlerini sağlar. |
### Açık metin rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ui-text-dimmed | var(--ui-color-neutral-400) | En düşük vurgulu yardımcı metin. Zorunlu alan etiketlerinde veya doğrulama mesajlarında bu rolü kullanmayın. |
| --ui-text-muted | var(--ui-color-neutral-500) | Alan ipuçları gibi destekleyici açıklamalar ve özgün önizlemedeki giriş paragrafı. |
| --ui-text-toned | var(--ui-color-neutral-600) | İkincil okuma hiyerarşisi; kontrastı daha da azaltmadan önce normal metin rolüyle karşılaştırın. |
| --ui-text | var(--ui-color-neutral-700) | Ana okuma akışı ve kullanıcı tarafından girilen içerik için varsayılan metin rolü. |
| --ui-text-highlighted | var(--ui-color-neutral-900) | Önizlemedeki ana başlık da dâhil olmak üzere, yüksek vurgulu başlıklar ve ön plan ayrıntıları. |
| --ui-text-inverted | #fff | Ters çevrilmiş koyu bir yüzeyde kullanılan ön plan rengi; her vurgu rengi üzerinde genel amaçlı beyaz metin geçersiz kılması değildir. |
### Açık yüzeyler ve kenarlıklar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ui-bg | #fff | Tam oluşturucuda kullanılan temel tuval ve açık kart yüzeyi. |
| --ui-bg-muted | var(--ui-color-neutral-50) | Açık görünümde ikincil bir alan için kullanılan, ölçülü bir destek yüzeyi. |
| --ui-bg-elevated | var(--ui-color-neutral-100) | Yükseltilmiş veya vurgulu ikincil yüzeyleri beyaz tuvalden daha belirgin biçimde ayırır. |
| --ui-bg-accented | var(--ui-color-neutral-200) | Daha belirgin nötr bir arka plan; alan değerlerinin bu arka plan üzerinde okunaklı kalmasını sağlayın. |
| --ui-bg-inverted | var(--ui-color-neutral-900) | Ters çevrilmiş ön plan rolüyle eşleştirilecek koyu nötr yüzey. |
| --ui-border | var(--ui-color-neutral-200) | Alanlar ve kart kenarları için varsayılan nötr ayırıcı çizgi. |
| --ui-border-muted | var(--ui-color-neutral-200) | Güçlü bölüm sınırları yerine ilişkili bloklar arasında kullanılan düşük vurgulu ayırıcılar. |
| --ui-border-accented | var(--ui-color-neutral-300) | Varsayılan kenarlık yeterli ayrımı sağlamadığında kullanılan daha belirgin nötr dış çizgi. |
| --ui-border-inverted | var(--ui-color-neutral-900) | Ters çevrilmiş yüzeyler için kenarlık rolü; amaçlanan arka planla birlikte değerlendirin. |
### Ortak geometri ve Tailwind metin stilleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ui-radius | .25rem | Gerçek derlenmiş çıktıda yayımlanmış Nuxt UI veya Tailwind varsayılanları. Özgün düzen kendi 1100px maksimum genişliğini ve 24px aralığını kullanır. |
| --ui-container | 80rem | Gerçek derlenmiş çıktıda yayımlanmış Nuxt UI veya Tailwind varsayılanları. Özgün düzen kendi 1100px maksimum genişliğini ve 24px aralığını kullanır. |
| --spacing | .25rem | Gerçek derlenmiş çıktıda yayımlanmış Nuxt UI veya Tailwind varsayılanları. Özgün düzen kendi 1100px maksimum genişliğini ve 24px aralığını kullanır. |
| --text-sm | .875rem | Gerçek derlenmiş çıktıda yayımlanmış Nuxt UI veya Tailwind varsayılanları. Özgün düzen kendi 1100px maksimum genişliğini ve 24px aralığını kullanır. |
| --text-xl | 1.25rem | Gerçek derlenmiş çıktıda yayımlanmış Nuxt UI veya Tailwind varsayılanları. Özgün düzen kendi 1100px maksimum genişliğini ve 24px aralığını kullanır. |
| --text-4xl | 2.25rem | Gerçek derlenmiş çıktıda yayımlanmış Nuxt UI veya Tailwind varsayılanları. Özgün düzen kendi 1100px maksimum genişliğini ve 24px aralığını kullanır. |
### Vue bileşen sözleşmeleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Vite plugin | ui({ colorMode: false }) | Bileşen/tema içe aktarımlarını ve gerekli tarayıcı entegrasyonunu oluşturur. |
| Vue plugin | createApp(App).use(ui) | ui öğesini @nuxt/ui/vue-plugin üzerinden içe aktarın; tek başına ham bileşen içe aktarımı, bağımsız kurulumun tamamı değildir. |
| UApp | Application wrapper | Bileşen ağacı için yerel uygulama bağlamını sağlar. |
| UFormField | label, description, name | Alan bağlamını ve okunabilir yardımcı metni denetim bileşenine bağlar. |
| UInput / UTextarea | v-model | Her iki girdi de Vue ref'leriyle kontrol edilir; metin alanında ayrıca autoresize ve satır sayısı kullanılır. |
| USwitch | v-model + label | İsteğe bağlı kontrol listesi seçimi, gerçek bir boole durumudur. |
| UButton | @click / color / variant | Birincil oluşturma ve nötr dış çizgili kurtarma eylemleri yerel varyantları kullanır. |
| UCard | header slot + default body | Alan içeriğiyle okunabilir sonucu, birbiriyle uyumlu yerel yüzeylerde tutar. |
| UBadge | color + variant="subtle" | Metin ve görünüm, bekleme durumuyla yerel olarak oluşturulmuş sonucu birbirinden ayırır. |
## Nuxt UI Tasarım Sistemi Tam Kılavuzu

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Nuxt UI Tasarım Sistemi Bağımsız Vue Çalışma Zamanı

### Resmî Vue entegrasyon yolunu kullanın

> Bu çalışma, @nuxt/ui 4.11.3 sürümünü Vite ile Vue 3 içinde çalıştırır. Nuxt sunucu tarafında işlenen bir uygulama değildir. Vite eklentisi, oluşturulan UI şablonlarını, otomatik bileşen içe aktarımlarını ve framework takma adlarını çözümler; Vue eklentisi ise gerekli çalışma zamanı entegrasyonunu kaydeder. Eksiksiz örnek her ikisini de içerir; böylece bir paketi yükleyip #build veya #imports çözümlenmeden bırakan yanıltıcı bir kurulum sunulmaz.

- @nuxt/ui/vite derleme zamanı entegrasyonunu sağlar.

- @nuxt/ui/vue-plugin çalışma zamanı kaydını sağlar.

- UApp, yerel bileşen ağacını sarar.

### Uygulama sarmalayıcısını ve stil sayfasını koruyun

UApp, bileşimi sarar. Stil sayfası Tailwind CSS ve @nuxt/ui öğelerini içe aktarır; ana giriş noktası da uygulamayı bağlamadan önce bu stil sayfasını içe aktarır. Derleme, kartların ve anahtarların statik taklitleri yerine gerçek bileşen CSS ve davranışlarını üretir. Bu, kitaplığı incelemek için somut bir tarayıcı kurulumudur; Nuxt uygulaması kendi belgelenmiş modül kurulumunu kullanmalıdır.

## Nuxt UI Tasarım Sistemi Anlamsal Renkleri ve Bileşen Varyantları

### Kopyalanmış bir yeşil yerine anlamsal renkleri kullanın

Varsayılan yapılandırma primary ve success değerlerini yeşile, secondary ve info değerlerini maviye, warning değerini sarıya, error değerini kırmızıya ve neutral değerini arduvaza eşler. Yerel bileşenler bu takma adları renk özellikleri aracılığıyla kullanır. Böylece birincil oluşturma düğmesiyle nötr dış çizgili sıfırlama düğmesi, özel bir paleti yanlış biçimde Nuxt UI varsayılanı diye tanıtmadan farklı eylem rollerini temsil eder.

### Görünüm kapsamını açıkça belirtin

Bu yalnızca açık görünüm çalışmasında Vite eklentisi colorMode:false ile yapılandırılmıştır. Referans tablosunda ilgili açık metin, yüzey ve kenarlık tanımları listelenir. Bu değerlerin koyu temada da aynen kullanıldığını iddia etmez. Renk modu ekleyen bir ürün, seçtiği entegrasyonu etkinleştirmeli ve denetim bileşenlerini, yüzeyleri ve kayıtlı tercihleri birlikte doğrulamalıdır.

## Nuxt UI Tasarım Sistemi Metin Rolleri, Yüzeyler ve Geometri

### Anlamsal CSS ilişkilerini inceleyin

Destekleyici metin, neutral-500 değerine işaret eden --ui-text-muted değişkenini kullanır; ana başlık ise neutral-900 değerine işaret eden --ui-text-highlighted değişkenini kullanır. Yüzey ve kenarlık değişkenleri de benzer biçimde yapılandırılmış nötr renk ölçeğine başvurur. Kılavuz, her şeyi birbiriyle ilgisiz birkaç onaltılık değere indirgemek yerine bu ilişkileri korur; böylece nötr palet değiştirildiğinde bile bileşen teması tutarlı kalır.

### Paylaşılan varsayılanları sayfaya özgü tercihlerden ayırın

Bu sürümde paylaşılan --ui-radius değeri .25rem, --ui-container değeri ise 80rem'dir. Özgün özet düzeni bunun yerine 1100px dış maksimum genişlik, 24px aralıklı iki sütun ve 700px altında tek sütun kullanır. Başlık ve destek metni boyutlarını Tailwind'in gerçek metin rolleri sağlar. Bu sayfa tercihleri, sağlanan CSS içinde yer alır; kitaplık genelinde geçerli gereksinimler olarak uydurulmamıştır.

## Nuxt UI Tasarım Sistemi Alan Bileşimi ve Yerel Doğrulama

### Her girdiye gerçek bir alan bağlamı sağlayın

UFormField, UInput veya UTextarea çevresinde görünür bir etiket ve ad sağlar. Bağlam alanında ayrıca, kırpılmış içeriğe göre hesaplanan bir sözcük sayısı gösterilir. Her iki denetim de v-model kullanır; böylece görüntülenen değerlerle bileşim işleyicisi aynı ref'leri okur. Metin alanında kullanışlı bir başlangıç satır sayısı ve autoresize vardır; bu sayede uzun kullanıcı girdileri sabit ve kırpılmış bir kutuda kaybolmak yerine alanı büyütür.

### Bileşimden önce doğrulayın

Özgün oluşturma eylemi, başlık ve bağlamın kırpıldıktan sonra boş olmamasını gerektirir. Bunlardan biri eksikse okunabilir bir uyarı gösterir ve kullanıcının mevcut girdilerini korur. Bu, uygulama doğrulamasıdır; sunucuya çağrı yapıldığı veya dâhil edilmemiş bir şema olduğu anlamına gelmez. Sağlanan kod, kuralı ve hata yolunu tek bir yerde açıkça gösterir.

## Nuxt UI Tasarım Sistemi Türetilmiş Taslak ve Eski Durumun Önlenmesi

### Yalnızca mevcut metni bir araya getirin

Çıktı, sağlanan başlık ve bağlamı isteğe bağlı, sabit bir paylaşım kontrol listesiyle birleştirir. Sonuç, bunun bir AI yanıtı değil, yerel bir taslak olduğunu belirtir. Model çağrısı, yükleme gecikmesi veya uydurulmuş içerik yoktur. İsteğe bağlı kontrol listesi, yerel bir USwitch boole değeriyle kontrol edilir ve oluşturulan metin bu tercihi doğrudan yansıtır.

### Girdiler değiştiğinde eski sonucu temizleyin

Başlık, bağlam ve kontrol listesi üzerindeki bir Vue watch, herhangi bir düzenlemeden sonra önceki oluşturulmuş sonucu kaldırır. Ardından durum rozeti yeniden "Metniniz bekleniyor" durumuna döner. Böylece kullanıcı yeni girdileri düzenlerken eski bir taslağın güncelmiş gibi görünmesi önlenir. Sözcük sayısı hesaplanan bir değer olarak kaldığından, mevcut bağlamdan kopmaz.

## Nuxt UI Tasarım Sistemi Eksiksiz Boş ve Sıfırlama Durumları

### Bekleme panelini kullanışlı hâle getirin

Bileşim yapılmadan önce sağ kartta nelerin görüneceği, düzenleme, gizlilik ve sıfırlama işlemlerinin nasıl çalıştığı tam olarak açıklanır. Bu, içeriği boş bir modül değildir. Bileşim yapıldıktan sonra aynı alanda satır sonları ve metin kaydırması korunmuş, okunabilir taslağın tamamı gösterilir. Rozet, durumu metinle de belirtir; böylece tek gösterge renk olmaz.

### Örnek girdilerin tamamını geri yükleyin

Örneği sıfırla işlemi özgün başlığı, bağlamın tamamını ve etkin kontrol listesini geri yüklerken sonucu ve varsa hatayı temizler. Okuyucunun hangi içeriğin buraya ait olduğunu tahmin etmesini gerektiren boş bir örnek bırakmaz. Tarayıcı kontrolü, değiştirilmiş bir özeti oluşturur ve ardından sıfırlama sonrası örnek başlığının tamamının geri geldiğini doğrular.

## Nuxt UI Tasarım Sistemi Duyarlı Kartlar ve Metin Akışı

### Sonucu dar ekranlarda okunaklı tutun

Kartlar 700px altında tek sütuna dönüşür ve tüm girdiler kullanılabilir genişliği kaplar. Taslakta, sarılamayan önceden biçimlendirilmiş bir satır yerine pre-wrap kullanılır; böylece uzun başlıklar veya cümleler doğal biçimde satırlara bölünebilir. Düğmeler, kendi eylem grupları içinde alt satıra geçer. Sayfa; gerçek bir düzenleme ve bileşim işleminden sonra telefon, tablet ve masaüstü boyutlarının yanı sıra 280px genişlikte de kontrol edilir.

### Yerel geçişlerden sonraki durumu inceleyin

Anahtarın biçemi, yerel durum geçişini içerir. Görsel kontrol, sonucu yakalamadan önce bekler; böylece başparmak veya iz rengindeki geçici bir değişiklik, son durum sanılmaz. İşlevsel kontroller, işaretlenmemiş bir anahtarın kontrol listesini oluşturulan metinden gerçekten çıkardığını doğrulayarak boole etkisini sınar.

## Nuxt UI Tasarım Sistemi için Eksiksiz Vue ve Vite Projesi

### Sağlanan beş dosyanın tümünü kullanın

Örnek; App.vue, main.js, style.css, vite.config.mjs ve index.html dosyalarını içerir. Yapılandırmada @vitejs/plugin-vue ve @nuxt/ui/vite; ana girişte ise @nuxt/ui/vue-plugin kullanılır. Yalnızca @nuxt/ui paketini yükleyip App.vue dosyasını yapıştırmak, çalıştırılabilir eksiksiz bir proje oluşturmaz. Sabitlenmiş kurulum, gerçek yerel bileşenleri ve anlamsal stilleriyle yerel önizlemeyi yeniden oluşturur.

1. Sağlanan beş dosyanın tümünü aynı klasöre kaydedin.

2. Sabitlenmiş bağımlılıkları yükleyin.

3. Vite'ı bu dizinde çalıştırın.

4. Eksik girdiyi, düzenlenen çıktıyı, kontrol listesinden öğe kaldırmayı ve sıfırlamayı test edin.

### Bu tarayıcı çalışmasını dağıtım ortamından ayrı tutun

Yerel derlemede sunucu uç noktası, kimlik doğrulama, kalıcı depolama veya harici model bağlantısı yoktur. Bileşen adları ya da oluşturma eylemi, bu özelliklerin bulunduğu anlamına gelmez. Gerçek bir ürün, kendi doğrulanmış kalıcılık ve hizmet davranışlarını ekleyerek alan ve durum düzenini yeniden kullanabilir; ancak bu eklemeler olmadan da çalışmanın tamamı kullanışlıdır.

## Nuxt UI Tasarım Sistemi Bileşen Örnekleri

### App.vue

Yerel bileşenlerin eksiksiz bir bileşimi ve reaktif durum.

```
<script setup>
import{ref,computed,watch}from'vue';
const title=ref('A calmer project handoff'),context=ref('Help a small team understand what is ready, what needs a decision, and who owns the next step.'),checklist=ref(true),error=ref(''),brief=ref('');const words=computed(()=>context.value.trim()?context.value.trim().split(/\s+/).length:0);watch([title,context,checklist],()=>{brief.value='';error.value=''});function compose(){if(!title.value.trim()||!context.value.trim()){error.value='Add both a title and context before composing.';return}brief.value=title.value.trim()+'\n\nPurpose\n'+context.value.trim()+(checklist.value?'\n\nBefore sharing\n• Name the next decision.\n• Identify an owner.\n• Include the source materials.':'')+'\n\nThis is a local draft, not a generated AI response.';}function reset(){title.value='A calmer project handoff';context.value='Help a small team understand what is ready, what needs a decision, and who owns the next step.';checklist.value=true;brief.value='';error.value=''}
</script>
<template><UApp><main><p class="text-primary font-semibold text-sm">NUXT UI / ORIGINAL BRIEF COMPOSER</p><h1 class="text-4xl font-bold tracking-tight mt-4 text-highlighted">Put the next step into words.</h1><p class="text-muted mt-5 max-w-2xl leading-7">A local composition tool using Nuxt UI 4.11.3 in a standalone Vue application. The preview assembles your text; it does not call an AI model.</p><div class="layout"><UCard><template #header><h2 class="font-semibold text-xl">Write the essentials</h2></template><div class="stack"><UFormField label="Brief title" name="title"><UInput v-model="title" class="w-full" placeholder="Name the work" aria-label="Brief title"/></UFormField><UFormField label="Context" name="context" :description="words+' words in your context'"><UTextarea v-model="context" class="w-full" autoresize :rows="5" placeholder="What should the next person understand?" aria-label="Context"/></UFormField><USwitch v-model="checklist" label="Include the sharing checklist"/><p v-if="error" role="alert" class="text-error text-sm">{{error}}</p><div class="flex flex-wrap gap-3"><UButton @click="compose">Compose local brief</UButton><UButton color="neutral" variant="outline" @click="reset">Reset sample</UButton></div></div></UCard><UCard><template #header><div class="flex justify-between gap-3 flex-wrap"><h2 class="font-semibold text-xl">Readable draft</h2><UBadge :color="brief?'success':'neutral'" variant="subtle">{{brief?'Composed locally':'Waiting for your text'}}</UBadge></div></template><div v-if="brief" class="brief" role="status">{{brief}}</div><div v-else class="space-y-4 text-muted leading-7"><p>Your draft will keep the title and context you provide, with an optional sharing checklist.</p><ul class="list-disc pl-5 space-y-2"><li>Editing any input clears an older composed result.</li><li>No content leaves the browser.</li><li>Reset returns to the complete sample inputs.</li></ul></div></UCard></div><p class="notes text-muted">Actual UCard, UFormField, UInput, UTextarea, USwitch, UButton and UBadge components with Nuxt UI’s default semantic theme. Original application content and state; this example uses Vue/Vite, not a Nuxt server.</p></main></UApp></template>
```

Kod referansı

- Beş kaynak dosyanın tümünü aynı klasörde tutun.

### main.js

Vue bağlama ve Nuxt UI çalışma zamanı eklentisi.

```
import{createApp}from'vue';import ui from'@nuxt/ui/vue-plugin';import App from'./App.vue';import './style.css';createApp(App).use(ui).mount('#app');
```

Kod referansı

- Beş kaynak dosyanın tümünü aynı klasörde tutun.

### style.css

Yerel tema içe aktarımları ve özgün duyarlı düzen.

```
@import 'tailwindcss';
@import '@nuxt/ui';
body{margin:0}*{box-sizing:border-box}main{max-width:1100px;margin:auto;padding:32px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}.stack{display:grid;gap:24px}.brief{white-space:pre-wrap;line-height:1.7;overflow-wrap:anywhere}.notes{font-size:13px;line-height:1.6;margin-top:24px}@media(max-width:700px){main{padding:16px}.layout{grid-template-columns:1fr}}textarea{min-height:150px}button{max-width:100%}
```

Kod referansı

- Beş kaynak dosyanın tümünü aynı klasörde tutun.

### vite.config.mjs

Vue derleyicisi ve Nuxt UI derleme eklentisi.

```
import{defineConfig}from'vite';import vue from'@vitejs/plugin-vue';import ui from'@nuxt/ui/vite';export default defineConfig({plugins:[vue(),ui({colorMode:false})],base:'./',build:{cssCodeSplit:false}});
```

Kod referansı

- Beş kaynak dosyanın tümünü aynı klasörde tutun.

### index.html

Eksiksiz tarayıcı kök belgesi.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Project brief composer</title></head><body><div id="app"></div><script type="module" src="./main.js"></script></body></html>
```

Kod referansı

- Beş kaynak dosyanın tümünü aynı klasörde tutun.

## Nuxt UI Tasarım Sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Önce sağlanan beş dosyanın tümünü kaydedin. Sabitlenmiş Vite ve Nuxt UI sürümlerinin desteklediği bir Node sürümü kullanın (yerel derlemede Node 22.17 kullanıldı).

```
npm init -y
npm install vue@3.5.43 vue-router@5.3.1 @nuxt/ui@4.11.3 tailwindcss@4.3.3 vite@8.3.2 @vitejs/plugin-vue@6.0.9
npx vite --host 127.0.0.1
```

### Projeniz İçin Bir İstem

```
Resmî Vite ve Vue eklentilerini kullanarak eksiksiz Nuxt UI 4.11.3 bağımsız Vue brief oluşturucusunu uygulayın. Anlamsal renkleri, UFormField bağlamlarını, denetimli girdi ve switch referanslarını, trim doğrulamasını, hesaplanan sözcük sayısını, eski sonuçların temizlenmesini, eksiksiz bekleme içeriğini ve sıfırlamayı koruyun. Bir yapay zekâ çağrısı veya arka uca kayıt yapıldığı izlenimini vermeyin.
```

## Nuxt UI Tasarım Sistemi Kaynakları ve Kapsamı

Bağımsız bir Vue/Vite tarayıcı uygulamasında gerçek Nuxt UI bileşenleri. Brief oluşturucu özgün OpenDesign kodudur ve bir yapay zekâ modelini, Nuxt sunucusunu veya kalıcılık hizmetini çağırmaz.

- Vue kurulumu Bağımsız Vue ve Vite entegrasyonu.

- Tasarım sistemi Anlamsal CSS ve ortak tema yapısı.

- Renkler Yapılandırılabilir anlamsal takma adlar.

- Form alanları Etiketler, açıklamalar ve alan bağlamı.

- Metin alanı Denetimli metin ve yeniden boyutlandırma davranışı.

## Nuxt UI Tasarım Sistemiyle İlgili Kaynaklar

### Oruga UI

Aranabilir ve kaldırılabilir konu etiketleri, zorunlu sözlük sınırları, isteğe bağlı bir temanın gerçek belirteçleri ve seçilen etiketleri yansıtan canlı bir kart içeren yerel bir Oruga katalog düzenleyicisi.

### Pico CSS

Pico CSS, anlamsal HTML stillerini rem tabanlı duyarlı bir yazı ölçeği ve tema değişkenleriyle tanımlar. Standart, sınıfsız ve koşullu dağıtımların tümleştirme kapsamları farklıdır; bu kılavuz, yerel açılır içerik ve iletişim kutusu davranışları içeren bir okuma tercihleri formu için standart derlemeyi kullanır.

### Preline UI

Bağlantılı sekmeler, sınırlandırılmış bir input-number eklentisi, yüklü tema takma adları, gerçek Tailwind ölçekleri ve seçilen oturuma göre güncellenen yerel bir malzeme tahmini içeren yerel bir Preline oturum planlayıcısı.


- [Uygulama başvurusu](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [Kaynak](https://ui.nuxt.com/docs/getting-started/theme/colors)
- [Kaynak](https://ui.nuxt.com/docs/getting-started/theme/design-system)
- [Kaynak](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [Kod referansı](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [Vue kurulumu Bağımsız Vue ve Vite entegrasyonu.](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [Tasarım sistemi Anlamsal CSS ve ortak tema yapısı.](https://ui.nuxt.com/docs/getting-started/theme/design-system)
- [Renkler Yapılandırılabilir anlamsal takma adlar.](https://ui.nuxt.com/docs/getting-started/theme/colors)
- [Form alanları Etiketler, açıklamalar ve alan bağlamı.](https://ui.nuxt.com/docs/components/form-field)
- [Metin alanı Denetimli metin ve yeniden boyutlandırma davranışı.](https://ui.nuxt.com/docs/components/textarea)