Nuxt UI Tasarım Sistemi.

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

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

Nuxt UI Tasarım Sistemi Bileşen Örnekleri

<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>

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');

@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%}

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}});

<!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>