Vue Modal Popup'ları Nasıl Oluşturulur (2026)

Bir mesajın her şeyden önce görülmesi gerektiğinde modala başvurursunuz: bir duyuru, bir ürün tanıtımı ya da doldurulmasını istediğiniz bir form. Vue modal popup'ları üçünü de karşılar ve satış dönüşümlerinizi artırmak için de iş görür.

Bu rehber adım adım bir tane kuruyor. Aşağıdaki her şeyi, 1 Ekim 2026 itibarıyla güncel kararlı sürüm olan Vue 3.5.43 ile kontrol ettik. Vue 3.6 hâlâ sürüm adayı aşamasında.

Vue Modal Popup'ları Oluşturmak İçin Neye İhtiyacınız Var?

İhtiyacınız olanlar:

• Bilgisayarınızda kurulu Node.js 22.18 veya sonrası ve npm (create-vue Ekim 2026'da en az bu sürümü istiyor)

• npm create vue@latest ile oluşturulmuş bir Vue 3 projesi; bu komut bir Vite projesi kurar. Vue CLI bakım modunda olduğu için yeni projelere onunla başlamayın

• Ana örnek için Vue 3.5 veya sonrası (defineModel, useTemplateRef ve useId kullanır); Vue 3.0 ile 3.4 arası için script'in bir sürümü de aşağıda var

• Vue tek dosya bileşenlerine (.vue dosyaları) temel düzeyde aşinalık

• Tahmini süre: temel bir modal için 30 dakika, tam özelleştirme için 2 saat

• Seviye: Yeni başlayanlara uygun (1-4. adımlar), orta seviye (5-7. adımlar)

Sürecin kısa özeti:

1. Vue modallarının ne olduğunu ve ne zaman kullanılacağını anlayın

2. Vue 3 proje ortamınızı kurun

3. Temel modal bileşenini sıfırdan oluşturun

4. Açma/kapama tetikleyicilerini ve geçişleri ekleyin

5. Stili, konumu ve erişilebilirliği özelleştirin

6. Hazır modal örneklerini ve şablonlarını inceleyin

7. Gelişmiş modal özellikleri için BootstrapVue'yu entegre edin

8. Kod yazmak istemiyorsanız modalları kodsuz araçlarla oluşturun

Vue.js ile Modal Nedir?

Vue.js, kullanıcı arayüzleri oluşturmanıza olanak tanıyan bir JavaScript framework'üdür. Vue.js'te modal, mevcut sayfanın üzerinde bir katman olarak görünen ve kullanıcı bir işlem yapana kadar arka planla etkileşimi engelleyen bir arayüz bileşenidir. Modal olmayan diyalogların (ipuçları veya açılır menüler gibi) aksine modal, kullanıcı gezinmeye devam etmeden önce bir karar vermesini ister.

Reaktif veri bağlama sayesinde Vue'da modal kurmak kolaydır. Tek bir boolean'ı değiştirirsiniz, modal görünür ya da kaybolur; DOM'a elle dokunmanız gerekmez.

Bir Vue.js uygulamasında modallar şu durumlarda anlamlıdır:

• Yüksek niyetli anlarda e-posta toplayan bülten kayıtları ve potansiyel müşteri formları

• Oturum açarken kullanıcıyı aynı sayfada tutan giriş ve kimlik doğrulama akışları

• Geri alınamaz işlemlerden önce "Bunu silmek istediğinize emin misiniz?" diye soran onay diyalogları

• Süreli kampanyaları veya özellik güncellemelerini gösteren ürün duyuruları

• Kullanıcı görüşünü sayfadan ayrılmadan toplayan geri bildirim formları

Vue School'un 2025 yılı değerlendirmesine göre Vue.js hem kurumsal hem de girişim ekiplerinde yayılmaya devam ediyor. Yani yığınınızda başka ne olursa olsun, sağlam bir Vue modal bileşeni kurmayı öğrenmeye değer.

Modal ile standart bir popup arasındaki temel fark, kullanıcı akışının kontrolüdür. Bir Bootstrap popup köşeden kayarak gelebilir, ama bir modal arka plan katmanıyla dikkat ister. Vue'da ikisi de bileşen olarak oluşturulur, ancak modallar standart popup'larda olmayan erişilebilirlik gereksinimleri taşır. Aynı ayrım Vue dışında da geçerli: modal popup nasıl oluşturulur rehberimiz düz HTML, CSS ve Tailwind sürümlerini anlatıyor.

Vue Modal Popup Nasıl Oluşturulur?

Bu bölüm sıfırdan bir Vue 3 modal bileşeni oluşturmayı adım adım anlatıyor. İçeriği slot'larla alan, arka plana tıklanınca ve Escape'e basılınca kapanan, odağı kendisini açan butona geri veren ve animasyonla açılıp kapanan yeniden kullanılabilir bir modal oluşturacaksınız.

Kodu iki tercih şekillendiriyor. Açık durum üst bileşende bir ref olarak durur ve modala v-model:open ile ulaşır; böylece üst bileşen modalın açık olup olmadığını her zaman bilir. İşaretleme ise yerel bir <dialog> öğesidir: showModal() ile açıldığında sayfadaki her şeyin üstünde durur, arka planı etkileşime kapatır, odağı içeri taşır ve Escape tuşunu bir cancel olayına çevirir. Erişilebilirlik işinin çoğu böylece sizin yerinize yapılmış olur (ayrıntılar için MDN'in dialog sayfası).

1. Adım: Modal Bileşen Dosyasını Oluşturun

İşe ayrı bir bileşen dosyasıyla başlayın. Bu dosya yeniden kullanılabilir modal sarmalayıcınız olacak; arka plan katmanını, içerik kutusunu ve kapanma davranışını o yönetir.

1. Vue projenizde src/components/ klasörüne gidin

2. BaseModal.vue adında yeni bir dosya oluşturun

3. <script setup> bloğuna bir defineModel('open') çağrısı ekleyin; bu çağrı open prop'unu ve update:open olayını sizin için tanımlar

4. <template> bloğunu ekleyin: bir <Transition>'ı saran bir <Teleport to="body"> ve onun içinde içeriği taşıyan bir <dialog>

5. Modalın tamamını koşullu oluşturmak için <dialog> üzerinde v-if="open" kullanın

Bileşenin tamamı aşağıda. Önce script ve template geliyor; stiller 3. adımda.

<!-- src/components/BaseModal.vue (Vue 3.5+) -->
<script setup>
import { watch, useTemplateRef, useId } from 'vue'

defineProps({
  title: { type: String, required: true }
})

// Üst bileşende v-model:open. defineModel prop'u ve olayı tanımlar.
const open = defineModel('open', { type: Boolean, default: false })

const dialog = useTemplateRef('dialog')
const titleId = useId()
let opener = null

// Vue <dialog>'u oluşturduktan sonra onu modal olarak aç.
watch(open, (isOpen) => {
  if (isOpen) {
    opener = document.activeElement
    dialog.value?.showModal()
  }
}, { flush: 'post', immediate: true })

function close() {
  open.value = false
}

// Kapanış geçişi bitince çalışır: odağı tetikleyiciye geri gönder.
function restoreFocus() {
  opener?.focus()
  opener = null
}
</script>

<template>
  <Teleport to="body">
    <Transition name="modal" @after-leave="restoreFocus">
      <dialog
        v-if="open"
        ref="dialog"
        class="modal"
        :aria-labelledby="titleId"
        @cancel.prevent="close"
        @close="close"
        @click.self="close"
      >
        <div class="modal-panel">
          <h2 :id="titleId" class="modal-title">{{ title }}</h2>
          <slot />
          <div v-if="$slots.footer" class="modal-footer">
            <slot name="footer" :close="close" />
          </div>
          <button type="button" class="modal-close" aria-label="Kapat" @click="close">×</button>
        </div>
      </dialog>
    </Transition>
  </Teleport>
</template>

<!-- src/components/BaseModal.vue (Vue 3.0–3.4): template aynı -->
<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  open: { type: Boolean, default: false },
  title: { type: String, required: true }
})
const emit = defineEmits(['update:open'])

const dialog = ref(null) // template'teki ref="dialog" ile eşleşir
const titleId = `modal-title-${Math.random().toString(36).slice(2)}`
let opener = null

watch(() => props.open, (isOpen) => {
  if (isOpen) {
    opener = document.activeElement
    dialog.value?.showModal()
  }
}, { flush: 'post', immediate: true })

function close() {
  emit('update:open', false)
}

function restoreFocus() {
  opener?.focus()
  opener = null
}
</script>

Ardından bileşeni herhangi bir üst bileşenden kullanın. Açık durum tek bir ref:

<!-- App.vue -->
<script setup>
import { ref } from 'vue'
import BaseModal from './components/BaseModal.vue'

const showSignup = ref(false)
</script>

<template>
  <button type="button" @click="showSignup = true">%10 indirim al</button>

  <BaseModal v-model:open="showSignup" title="İlk siparişinizde %10 indirim">
    <p>Listemize katılın, kodu size e-postayla gönderelim.</p>
    <form @submit.prevent="showSignup = false">
      <label for="signup-email">E-posta adresi</label>
      <input id="signup-email" type="email" autocomplete="email" required autofocus />
      <button type="submit">Kodumu gönder</button>
    </form>
  </BaseModal>
</template>

v-model:open sayesinde üst bileşen modalı tek bir ref'i değiştirerek açıp kapatır. E-posta alanındaki autofocus, showModal()'a odağı nereye koyacağını söyler; o olmadan odak, dialog içindeki ilk odaklanabilir öğeye gider.

Çalıştığını şuradan anlarsınız: BaseModal'ı herhangi bir üst bileşene aktarıp v-model:open="showSignup" bağladığınızda katman, tarayıcı konsolunda hata olmadan açılıp kapanır.

Dikkat edin:

• Olay tanımını unutmak: Vue 3.0 ile 3.4 arası sürümde open prop'unu tanımlayıp defineEmits(['update:open']) satırını atlarsanız Vue 3 yine çalışır ama "extraneous non-emits event listeners" uyarısı verir. Uyarıyı susturmak ve bileşenin sözleşmesini açık tutmak için olayı tanımlayın. defineModel bunu sizin için yapar.

• v-if yerine v-show kullanmak: v-show modalı her zaman DOM'da tutar (yalnızca CSS ile gizler). Form içeren veya açılışta veri çeken modallarda bu, gereksiz ağ istekleri ve bellek kullanımı demektir. Yeniden bağlamadan anında göster/gizle performansına ihtiyacınız yoksa v-if kullanın.

İpucu: Modal bir <dialog> zaten her şeyin üstünde görünse de Teleport sarmalayıcısını tutun. Modalı doğrudan document.body'ye bağlamak onu overflow: hidden, transform veya kendi yığın bağlamı olan üst öğelerin dışında tutar; böylece yalnızca sayfanın temel stillerini miras alır. Bir gün düz bir <div role="dialog">'a dönmeniz gerekirse de ihtiyacınız olan budur.

2. Adım: Arka Plan Katmanını ve Kapatma Mantığını Ekleyin

Arka plan katmanının iki görevi var: arkadaki içeriği görsel olarak karartır ve kullanıcılara modalı kapatmak için bir tıklama alanı verir. Kapatma mantığını burada doğru kurarsanız en yaygın modal hatalarından kurtulursunuz.

1. <dialog> üzerine close() çağıran bir @click.self işleyicisi ekleyin. Dialog'un kendi padding'i 0 olduğunda ve panel onu doldurduğunda, karartılmış arka plana yapılan tıklama dialog'un kendisine ulaşır, panele yapılan tıklama ulaşmaz

2. İşin önemli kısmı .self değiştiricisi. Modal içeriğine yapılan tıklamalar modalı artık yanlışlıkla kapatmaz; yalnızca arka planın kendisine yapılan tıklamalar kapatır

3. İçerik alanına aynı close() fonksiyonunu çağıran bir kapatma butonu ekleyin; ekran okuyucunun duyurması için aria-label="Kapat" verin

4. Escape'i @cancel.prevent="close" ile yönetin. Kullanıcı Escape'e bastığında tarayıcı cancel olayını tetikler; olayı engellemek kararı Vue'ya bırakır, Vue da open'ı false yapıp kapanış geçişini oynatır. Ek @close="close", tarayıcı dialog'u yine de kapatırsa Vue'yu senkron tutar (Chrome, arada başka bir etkileşim olmadan Escape'e iki kez basıldığında bunu yapar)

5. Arka planı scoped style bloğunda ::backdrop sözde öğesiyle, örneğin background: rgb(0 0 0 / 0.5) ile biçimlendirin

Çalıştığını şuradan anlarsınız: koyu arka plana tıklamak modalı kapatır, beyaz içerik kutusunun içine tıklamak kapatmaz ve Escape'e basmak sayfanın her yerinden modalı kapatır.

Dikkat edin:

• Arka plan tıklamasında .self değiştiricisini unutmak: .self olmadan modal içeriğindeki her tıklama yukarı kabarcıklanır ve kapatma işleyicisini tetikler. Klasik belirti, biri bir metin alanına tıkladığında her seferinde kapanan bir form modalıdır; sebebi üst öğede .self'in eksik olmasıdır.

• Escape dinleyicisinde bellek sızıntısı: Modalı <div role="dialog"> olarak kurarsanız kendi Escape dinleyicinize ihtiyacınız olur. onMounted içinde document.addEventListener('keydown', handler) ekleyip onUnmounted içinde kaldırmayı unutursanız, modal her açıldığında dinleyiciler üst üste biner. 10 açma/kapama döngüsünden sonra Escape aynı anda 10 kapatma olayı tetikler.

İpucu: <div> sürümünde ham olay dinleyicileri yerine VueUse'un onKeyStroke composable'ını kullanın. Temizliği otomatik yapar ve daha sade bir API sunar: onKeyStroke('Escape', () => { open.value = false }).

3. Adım: Geçiş Animasyonlarını Ekleyin

Ham göster/gizle sert hissettirir. Vue'nun yerleşik <Transition> bileşeni, harici bir kütüphane olmadan açılış ve kapanış animasyonları eklemenizi sağlar.

1. Modal şablonunuzu <Transition name="modal"> ile sarın (yukarıdaki bileşende zaten var)

2. Geçiş aşamaları için CSS sınıflarını tanımlayın: .modal-enter-from, .modal-enter-active, .modal-leave-to ve .modal-leave-active

3. Aynı sınıfları ::backdrop üzerinde kullanarak arka planı 200 ms içinde opacity: 0'dan opacity: 1'e geçirin

4. İnce bir yakınlaşma etkisi için içerik kutusunu 200 ms içinde transform: scale(0.96)'dan transform: scale(1)'e büyütün

5. Aktif sınıflarda transition: opacity 200ms ease-out, transform 200ms ease-out kullanın ve azaltılmış hareket isteyen ziyaretçiler için ölçeklemeyi kaldırın

<style>
/* Scoped değil: açık bir modalın arkasındaki sayfayı kilitler */
html:has(dialog.modal[open]) {
  overflow: hidden;
}
</style>

<style scoped>
.modal {
  padding: 0;
  border: none;
  border-radius: 12px;
  width: min(90vw, 480px);
  max-height: 85vh;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.25);
}
.modal::backdrop {
  background: rgb(0 0 0 / 0.5);
}
.modal-panel {
  position: relative;
  padding: 24px;
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  font-size: 24px;
  cursor: pointer;
}

/* <Transition name="modal"> */
.modal-enter-active,
.modal-leave-active {
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.modal-enter-active::backdrop,
.modal-leave-active::backdrop {
  transition: opacity 200ms ease-out;
}
.modal-enter-from,
.modal-leave-to {
  opacity: 0;
  transform: scale(0.96);
}
.modal-enter-from::backdrop,
.modal-leave-to::backdrop {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .modal-enter-from,
  .modal-leave-to {
    transform: none;
  }
}
</style>

Burada sıra önemli. Vue <dialog>'u eklediğinde modal-enter-from sınıfını ekler, post-flush watcher aynı tick içinde showModal()'ı çağırır ve Vue bir sonraki karede sınıfları değiştirir; böylece tarayıcı başlangıç durumundan itibaren animasyon yapar. Kapanışta Vue, kapanış geçişi bitene kadar dialog'u sayfada tutar, sonra kaldırır; @after-leave da odağı geri verir.

dev.to'daki Vue 3 modal rehberine göre modal diyalogların karmaşık olması gerekmiyor; geçişler az kodla cila katıyor.

Çalıştığını şuradan anlarsınız: Modal açıldığında yumuşakça belirir, kapandığında yumuşakça kaybolur; görsel bir parlama ya da sıçrama olmaz. Modalı hızla açıp kapatarak test edin: animasyon yarıda kesilse bile düzgün tamamlanmalı.

Dikkat edin:

• Geçiş adı uyuşmazlığı: <Transition name="modal"> CSS sınıf önekinizle eşleşmezse (örneğin .modal-enter-from yerine .fade-enter-from yazarsanız) animasyon çalışmaz ama modal yine çalışır. Bu da hatanın testte gözden kaçmasını kolaylaştırır.

• display: none'ı animasyonlamak: CSS, display özelliğine geçiş uygulayamaz. Gizli durum için opacity ve transform yerine display: none kullanmaya çalışırsanız kapanış animasyonu hiç oynamaz.

İpucu: Modal geçiş süresini 250 ms'nin altında tutun, yalnızca opacity ve transform'u animasyonlayın ve modalın hızlı gelip yerine oturması için ease-out eğrisi kullanın. Daha fazla hareket fikri için animasyonlu popup rehberimize bakın.

Vue Modal Popup'larını Sitenize Göre Nasıl Özelleştirirsiniz?

Çalışan bir modal ilk adımdır. Onu markanızın tasarım sistemine uydurmak ve gerçek sayfalarda ayakta tutmak daha fazla iş ister; zamanın çoğu da uç durumlara gider.

Desteklediğimiz popup'lardan iki rakam, kapatma butonunun ve telefon düzeninin neden en çok özeni hak ettiğini açıklıyor: popup'ı kapatan ziyaretçilerin %71'i bunu popup göründükten sonraki 5 saniye içinde yapıyor ve popup gösterimlerinin %63'ü mobilde gerçekleşiyor (Popupsmart popup kıyaslaması 2026, Ocak 2024 - Eylül 2026).

Esnek İçerik İçin Slot'ları Kullanın

Vue'nun slot sistemi, temel bileşeni değiştirmeden modalınıza istediğiniz içeriği eklemenizi sağlar. Üç adlandırılmış slot tanımlayın: header, default (gövde) ve footer. Her slot'un yedek içeriği olsun ki bir slot verilmediğinde de modal çalışsın. Böylece bir onay diyaloğu yalnızca varsayılan slot'u kullanırken karmaşık bir form üçünü birden kullanır. BaseModal'daki footer slot'u close'u slot prop'u olarak aktarır; böylece bir İptal butonu, üst bileşen kendi işleyicisini bağlamadan <template #footer="{ close }"> kullanabilir.

Ayarları Props ile Aktarın

Sık ihtiyaç duyulan özelleştirmeler için props ekleyin: width (varsayılan: '500px'), closable (varsayılan: true) ve overlayClose (varsayılan: true). Bunları Vue 3'ün defineProps'u ile TypeScript generic'leri veya çalışma zamanı tanımıyla açıkça tipleyin. Props olarak stil nesneleri aktarmaktan kaçının; bunlar Vue'nun scoped stillerini atlar ve özgüllük çakışmaları yaratır. Bunun yerine CSS özel özelliklerini (değişkenleri) kullanın.

Kaydırma Kilidini Yönetin

Bir modal açıldığında arkadaki sayfanın kayması durmalı. 3. adımdaki html:has(dialog.modal[open]) kuralı bunu yalnızca CSS ile, unutulacak bir temizlik adımı olmadan yapar. :has() desteği olmayan eski tarayıcıları da destekliyorsanız, modal açıldığında watcher içinde document.documentElement.style.overflow = 'hidden' atayın ve restoreFocus() içinde sıfırlayın. Eski iOS Safari sürümleri overflow: hidden'ı da yok sayıyordu; orada body'ye position: fixed vermeniz ve modal kapanınca kaydırma konumunu geri yüklemeniz gerekir.

Aynı kaydırma kilidi React popup bileşenlerinde de işe yarar. Modalı hangi framework'ün açtığı tarayıcıyı ilgilendirmez.

Erişilebilirlik Gereksinimleri

showModal() ile açılan bir <dialog> zaten dialog rolüne sahiptir, modal olarak işlenir (aria-modal="true" ile aynı etki), arkasındaki sayfayı etkileşime kapatır ve odağı içeri taşır. Size iki iş kalır: modal başlığının kimliğini gösteren aria-labelledby ile bir etiket (useId() her örnek için bir kimlik üretir) ve kapanınca odağın tetikleyiciye dönmesi.

Modalı bir <div> olarak kurarsanız role="dialog" ve aria-modal="true"'yu kendiniz ekleyin ve odağı VueUse'un useFocusTrap'i gibi bir composable ile hapsedin; böylece Tab ve Shift+Tab arka plandaki sayfada değil, modal içindeki odaklanabilir öğeler arasında döner. WAI-ARIA modal diyalog kalıbı, test edilecek klavye davranışlarını listeler. Bir geliştiricinin dev.to'da yazdığı gibi: "Erişilebilir kalıpları kurmadan bunlardan düzinelercesini yaptığımı ilk ben kabul ederim." Aynı hatayı tekrarlamayın.

Dikkat edin:

• Odak tuzağını temizlemeyi unutmak: Bir <div> modalda odak tuzağı composable'ı kullanıyorsanız ve modal kapanınca devre dışı kalmıyorsa, sayfanın geri kalanında klavyeyle gezinme tamamen bozulur. Odak tuzağının etkinleşmesini her zaman modalın yaşam döngüsüne bağlayın.

• Piksel genişliklerini sabit yazmak: 500px genişliğinde bir modal masaüstünde iyi görünür ama mobilde taşar. Modalın küçük ekranlarda düzgünce küçülmesi için width: min(90vw, 480px) (veya max-width: 500px; width: 90%) kullanın. Mobil popup rehberimiz telefon düzenlerini daha ayrıntılı anlatıyor.

Vue Modal Popup Kullanmanın Faydaları Nelerdir?

Vue modallar, ön yüz ekiplerine aksi halde tam sayfa yüklemesi ya da elle yazılmış bir yığın JavaScript durumu gerektirecek kullanıcı etkileşimleri için reaktif, bileşen tabanlı bir yol sunar. Bunun size kazandırdıkları şunlar.

• Durum senkron kalır. Vue'nun reaktivitesi sayesinde modalınızın açık/kapalı durumu, form verileri ve doğrulama hataları değiştikçe güncellenir. Üst bileşende bir değişkeni değiştirdiğinizde her alt bileşen bunu hemen yansıtır; olay dinleyicisi karmaşasına gerek kalmaz.
• Tek sayfa uygulamalarına uyar. Vue modal yeni bir tarayıcı penceresi açmak yerine mevcut DOM içinde oluşturulur. Kullanıcılar aynı sayfada kalır ve Vue Router durumunuz bozulmaz.
• Bir kez yazarsınız. Modalınızı Vue tek dosya bileşeni olarak oluşturup herhangi bir Vue projesine ekleyin. Props içeriği, olaylar geri çağrıları yönetir, slot'lar özel işaretlemenizi alır; açma, kapama ve odak mantığı tek bir yerde durur.
• Açılana kadar yük getirmez. v-if ile bileşen, bir şey onu tetikleyene kadar DOM'da yoktur ve ilk sayfa yüklemeniz hızlı kalır. Her milisaniyenin dönüşüm oranlarını etkilediği e-ticaret sitelerinde bu koşullu oluşturma gerçek bir avantajdır.

Vue Modal Popup Örnekleri ve Şablonları

Bileşeni kendiniz yazmak istemiyorsanız, en sık karşılaşacağınız Vue 3 modal kütüphaneleri ve 1 Ekim 2026'da kontrol ettiğimizde npm'de listelenen son sürümleri aşağıda.

vue-final-modal (Vue 3)

Yıllarca en bilinen Vue 3 modal kütüphanesiydi. Birden fazla modalı üst üste açmayı, composable'larla dinamik modal oluşturmayı ve yerleşik erişilebilirliği destekler; <VueFinalModal> bileşenini v-model bağlamasıyla kullanırsınız. Ancak son sürümü 4.5.5, 10 Eylül 2024'te çıktı ve deposuna o tarihten beri commit gelmedi (1 Ekim 2026'da kontrol edildi); bu yüzden yeni projeler için artık önermiyoruz. Zaten kullanıyorsanız güncel Vue 3'te çalışmaya devam ediyor.

Jenesius Vue Modal

Modalları rota gibi ele alan, yönlendirme tarzı bir modal kütüphanesi. Modalları bir yığına ekleyip çıkarırsınız; bu da çok adımlı sihirbazlar için doğal bir yapı sunar. Modalların iş akışlarına bağlandığı SaaS uygulamaları için uygundur (örneğin plan seçimi, fatura bilgisi, abonelik onayı). Son npm sürümü Temmuz 2024'teki 1.11.9; benimsemeden önce deposundaki etkinliği kontrol edin.

@kouts/vue-modal

Sadeliğe odaklanan, 124 GitHub yıldızına sahip hafif bir seçenek. Başlık, footer ve boyut için props alan tek bir <Modal> bileşeni sunar. Hem Vue 2 hem Vue 3 ile çalıştığı için henüz geçiş yapmamış eski kod tabanlarını sürdüren ekiplere uyar. Kurulum etiketine dikkat edin: npm install @kouts/vue-modal hâlâ Vue 2 serisini (2.1.13) kurar; Vue 3'te @kouts/vue-modal@next (5.0.3) kullanın.

Nuxt UI Modal

Nuxt kullanıyorsanız Nuxt UI Modal bileşeni Tailwind CSS entegrasyonu, header/body/footer için adlandırılmış slot'lar ve yerleşik klavye desteğiyle gelir. Reka UI'ın dialog'u üzerine kuruludur ve kutudan çıktığı gibi Nuxt UI tasarım sistemini izler; Nuxt UI 4 düz Vue ve Vite projelerinde de çalışır.

Reka UI ve PrimeVue

Reka UI (eski adıyla Radix Vue), odak hapsetme ve Escape desteği yerleşik, stilsiz ve erişilebilir bir Dialog sunar; siz yalnızca CSS'i getirirsiniz. PrimeVue'nun Dialog'u ise tam tersi, stilli bir bileşen: zaten PrimeVue'nun form ve tablolarını kullanan ekipler için hazır bir çözüm. Eski yazılarda sık önerilen Headless UI'ın Vue paketi Eylül 2024'ten beri yeni sürüm almadı.

Gelişmiş Modallar İçin BootstrapVue Nasıl Entegre Edilir?

BootstrapVue, Bootstrap'in tasarım kalıplarını izleyen hazır modal bileşenleri sunar. Zaten Bootstrap CSS kullanan ekipler için bu, modal mantığını sıfırdan yazmadan üretime hazır modallara ulaşmanın en hızlı yoludur.

Kurulum ve Ayar

1. Paketleri kurun: npm install bootstrap-vue-next bootstrap (Vue 3 uyumluluğu için bootstrap-vue-next kullanın)

2. Eklentiyi main.js dosyanıza aktarın: import { createBootstrap } from 'bootstrap-vue-next'

3. Kaydedin: app.use(createBootstrap())

4. Giriş dosyanızda Bootstrap CSS'ini ve bootstrap-vue-next CSS'ini içe aktarın

5. <BModal> bileşenini şablonlarınızın herhangi bir yerinde v-model bağlamasıyla kullanın

BootstrapVue Modal'ın Temel Özellikleri

<BModal> bileşeni başlık, gövde ve footer için adlandırılmış slot'ları kutudan çıktığı gibi sunar. size="lg", centered, scrollable ve no-close-on-backdrop gibi props en yaygın ayar ihtiyaçlarını karşılar. Vue 3 projelerinde bootstrap-vue-next ayrıca lazy prop'uyla tembel oluşturmayı destekler; bu da DOM'a eklemeyi ilk açılışa kadar erteler.

Çalıştığını şuradan anlarsınız: <BModal> bileşeni, hiçbir özel CSS olmadan Bootstrap'in standart stiliyle (yuvarlatılmış köşeler, başlık ayırıcısı, footer butonları) görünür.

Dikkat edin:

• Yanlış paketi aktarmak: Orijinal bootstrap-vue paketi yalnızca Vue 2'yi destekler. Vue 3 için bootstrap-vue-next gerekir. API benzer ama aynı değil; bazı prop adları değişti.

• Mevcut stillerle CSS çakışmaları: Bootstrap'in genel stilleri projenizin mevcut tipografisini ve boşluklarını ezebilir. Bootstrap'in CSS'ini projenizin stillerinden önce aktarın veya yalnızca modal ile ilgili CSS'i dahil eden modüler içe aktarma yolunu kullanın.

İpucu: Tam Bootstrap bileşen kütüphanesine değil yalnızca modallara ihtiyacınız varsa BootstrapVue'yu tamamen atlayın: tek bir özellik için Bootstrap'in CSS'ini ve bir bileşen kütüphanesini yüklemiş olursunuz. Bunun yerine yukarıdaki 1-3. adımlardaki özel modalı kurun. Bootstrap'i Vue bileşenleri olmadan kullanıyorsanız Bootstrap popup rehberimiz Bootstrap 5.3'ün kendi modalını gösteriyor.

Vue 2 Modal'ı Vue 3'e Nasıl Taşırsınız?

Web'deki Vue modal kodlarının çoğu Vue 2 için yazıldı ve web'in büyük bölümü hâlâ onu çalıştırıyor: W3Techs'e göre Vue.js kullanan web sitelerinin %97,1'i 2. sürümü kullanıyor (30 Eylül 2026). Vue 2'nin desteği 31 Aralık 2023'te sona erdi; bu yüzden yeni modal kodu sağdaki Vue 3 kalıplarını kullanmalı.

Vue 3 geçiş rehberi tüm kırıcı değişiklikleri listeler; bir modal için genellikle yukarıdaki tablo işin tamamıdır.

Popupsmart ile Kolayca Vue Modal Popup Oluşturun

Her modalın kodlanması gerekmez. Bir pazarlamacı, ürün yöneticisi ya da ön yüzü Vue.js ile kurulmuş bir mağazanın sahibiyseniz, kodsuz bir popup oluşturucu sizi saatler yerine dakikalar içinde çalışan bir modala ulaştırır. Popup yazılımları, sıfırdan kurulması haftalar sürecek hedefleme, A/B testi ve analitiği karşılayacak kadar gelişti.

Popupsmart, Vue.js dahil her web sitesi framework'üyle çalışan kodsuz bir popup oluşturucu. Modalı görsel bir editörde tasarlar, hedefleme kurallarını belirler ve tek bir script etiketiyle sitenize eklersiniz. Vue bileşeni yazmanız ya da derleme sürecinize dokunmanız gerekmez. Popupsmart, script'inin toplamda yaklaşık 97 KB olduğunu ölçüyor; ücretsiz plan ayda 5.000 sayfa görüntülemeyle bir web sitesini kapsıyor.

Popupsmart ile modal şöyle oluşturulur:

1. Ücretsiz bir Popupsmart hesabı oluşturun ve popup oluşturucu kontrol panelini açın. Ardından “Embed Code” bağlantısına tıklayın.

Tek satırlık embed kodunu kopyalayın ve Vue uygulamanızın index.html dosyasına (veya sitenizin genel body bölümüne), kapanış </body> etiketinden hemen önce yapıştırın. Bir Vite projesinde index.html, proje kökünde package.json'ın yanında bulunur.

Embed kodunun nasıl çalıştığıyla ilgili ayrıntılar için rehberimize göz atın: "Embed Kodu Sitenize Nasıl Yerleştirilir"

Sol alt köşedeki hesabınıza, ardından "Websites"a tıklayın.

Kampanya oluşturacağınız bir alan adı henüz eklemediyseniz "New Website" butonuna tıklayın ve web sitenizin URL'sini girin. Ardından Save'e tıklayın.

Alan adınızı nasıl doğrulayacağınızla ilgili dokümantasyonumuza da göz atın.

Embed kodunu ve alan adınızı ekledikten sonra ilk kampanyanızı oluşturabilirsiniz.

2. "New Campaign" butonuna tıklayın ve işletme hedefinizi seçin.

3. Standart bir modal diyalog için "Show Up Announcement" gibi bir hedef seçin ve "Playbook"tan popup şablonunuzu belirleyin.

4. Modalınızı görsel editörde özelleştirin. Başlıkları, görselleri, renkleri ve eylem çağrısı butonlarını değiştirin.

5. Hedefleme kurallarınızı belirleyin. Modalın hangi sayfalarda görüneceğini seçin, tetikleyicileri (çıkış niyeti, kaydırma yüzdesi, zaman gecikmesi) ayarlayın ve kitle segmentlerini tanımlayın.

Popup kampanyanız hazır olduğunda Kaydet & Yayınla butonuna tıklayın.

Bir Vue butonundan açın. Popup'ı yalnızca biri tıkladığında göstermek için kampanyanın segmentinde Tıklamaya Duyarlı Hedeflemeyi açın ve size verdiği kodu bir tıklama fonksiyonundan çağırın. Vue şablonları window'a doğrudan erişemez; bu yüzden çağrıyı bir fonksiyona sarın (123456 yerine kendi kampanya kimliğinizi yazın):

<script setup>
function openOffer() {
  window.ps?.show({ id: 123456 })
}
</script>

<template>
  <button type="button" @click="openOffer">%10 indirim al</button>
</template>

<RouterLink> veya <a href> değil, bir <button> kullanın: bağlantı, popup açılmadan önce sayfayı değiştirir. Butona tıklayınca açılan popup'lar rehberimiz tıklamaya duyarlı kurulumu adım adım anlatıyor; ayarın kendisi için Tıklamaya Duyarlı Hedefleme sayfasına bakın.

Ne zaman kod, ne zaman kodsuz araç: Modalınız Vue uygulamanızın durumundan dinamik veri içeriyorsa (kullanıcı profili, sepet içeriği, anlık fiyatlar) onu bir Vue bileşeni olarak kodlayın. Modal pazarlama amaçlıysa (duyurular, e-posta toplama, kampanyalar) kodsuz bir araç kullanın. Aynı sitede iki yaklaşımı birlikte kullanmak sorun yaratmaz.

Vue Modal Geliştirmede Kaçınılması Gereken Yaygın Hatalar

Vue modal uygulamalarında en çok hata ayıklama zamanına ve en çok kullanıcı şikâyetine yol açan hatalar şunlar.

1. Teleport sarmalayıcısını atlamak. Bir <div> modalı iç içe geçmiş bir bileşenin içinde oluşturmak z-index yığın bağlamı sorunları yaratır. Modal, kardeş bir öğenin konumlandırılmış üst öğesinin arkasında görünebilir. Modalı belgenin köküne bağlamak için her zaman Vue 3'ün <Teleport to="body">'sini kullanın. Bu, Vue modal Stack Overflow başlıklarında en sık paylaşılan sorundur.

2. Birden fazla modalı yönetmemek. Bir modal başka bir modal açtığında (örneğin düzenleme içinde onay), bir modal yığınına ihtiyacınız olur. Yığın olmadan ikinci modalı kapatmak birinciyi de kapatır. Birden fazla açık modalı bağımsız yönetmek için bir composable veya store tabanlı bir yaklaşım kullanın. showModal() ile açılan iki <dialog>, üst katmanda açıldıkları sırayla üst üste dizilir; görsel taraf böylece sizin için halledilir.

3. Mobilde body kaydırma kilidini unutmak. Modal açıkken kök öğede kaydırmayı kilitleyin (3. adımdaki :has() kuralı) ve gerçek bir telefonda test edin: eski mobil Safari sürümleri body'deki overflow: hidden'ı yok sayıyordu. Orada body'ye position: fixed vermeniz, mevcut scrollY değerini kaydetmeniz ve kapanışta geri yüklemeniz gerekir. Bunu atlarsanız kullanıcılarınız iPhone'larda modalın arkasındaki tüm sayfayı kaydırır.

4. v-model'i yanlış öğede kullanmak. Vue 3 modal veri akışı sorularında sık görülen bir hata, alt bileşen içinde v-model'i doğrudan bir prop'a bağlamaktır. Vue 3 prop'ların doğrudan değiştirilmesine izin vermez. Prop değerini atamaya çalışmak yerine defineModel() (Vue 3.4+) kullanın veya defineEmits ile güncelleme olayını yayınlayın.

5. Erişilebilirliği baştan düşünmemek. ARIA özniteliklerini, odak hapsetmeyi ve klavyeyle gezinmeyi sonradan eklemek, ilk adımdan kurmaktan çok daha zordur. showModal() ile açılan ve başlığıyla etiketlenen bir <dialog> ile ya da role="dialog", aria-modal="true" ve odak tuzağı olan bir <div> ile başlayın. Ekran okuyucu kullananların buna sonraki bir sürümde değil, ilk sürümde ihtiyacı var.

6. Ağır içeriği önceden yüklemek. Modalınız veri çekiyor veya karmaşık bir form oluşturuyorsa, bileşenin yalnızca açıldığında bağlanması için v-show yerine v-if kullanın. Görsel içeren modallarda, modal içeriğindeki img etiketlerine loading="lazy" özniteliği ekleyerek görselleri tembel yükleyin.

7. Odağı geri vermemek. Modal kapandığında klavye ve ekran okuyucu kullanıcıları, modalı açan butona geri dönmeli. Modal açıldığında document.activeElement'i saklayın ve BaseModal'ın yaptığı gibi @after-leave içinde ona tekrar odaklanın.

Vue Modal Popup'ları Hakkında Son Sözler

Bir Vue modal oluşturmak üç şeye dayanır: görünürlüğü reaktif olarak değiştiren bir bileşen, düzgün kapanma/Escape yönetimi ve ilk günden erişilebilirlik. Bileşeni Vue 3'ün Composition API'siyle kendiniz yazın, Reka UI veya PrimeVue gibi bir kütüphane kullanın ya da Popupsmart gibi kodsuz bir oluşturucu tercih edin; temel ilkeler aynı kalır.

Yukarıdaki 1. adımla başlayın, BaseModal.vue dosyanızı oluşturun ve temel açma/kapama işlevini çalıştırın. Geçişleri, slot'ları ve özelleştirmeleri projeniz ihtiyaç duydukça ekleyebilirsiniz. Başka bir framework'le mi çalışıyorsunuz? Aynı kalıp Angular'da popup oluşturmaya ve React'e de taşınır. Kodu tamamen atlayıp bugün web sitenizde çalışan bir popup formu istiyorsanız, Popupsmart'ın ücretsiz planı embed koduyla bir modal çalıştırır.

Tasarım ilhamı için popup overlay örneklerinin tam listesine göz atın.

Vue Modal Popup'ları Hakkında Sıkça Sorulan Sorular

Modal ile popup arasındaki fark nedir?

Modal, kapatılana kadar sayfanın geri kalanıyla etkileşimi engeller. Popup ise ipuçları, kayan kutular, bildirim çubukları ve modallar dahil her türlü katman öğesini kapsayan daha geniş bir terimdir. Her modal bir popup'tır ama her popup bir modal değildir. Vue.js'te teknik fark, arka plan katmanı ekleyip sayfanın kaymasını engelleyip engellemediğinizdir. Uyarı kutusu ile popup penceresi arasındaki farka daha ayrıntılı bakmak için Popupsmart topluluğundaki açıklamayı okuyabilirsiniz.

Vue'da popup nasıl oluşturulur?

<script setup> kullanan bir Vue tek dosya bileşeni oluşturun ve Boolean bir open modeli tanımlayın (Vue 3.4 ve sonrasında defineModel). <Teleport> ve <Transition> içinde bir <dialog> öğesi oluşturun, açıldığında showModal() çağırın ve üst bileşende bir butonla değiştirilen v-model:open ile bağlayın. Modal olmayan popup'larda (ipuçları, açılır menüler) arka plan katmanını ve kaydırma kilidini atlayın. Hazır UI kütüphaneleriyle çalışmayı tercih ediyorsanız Angular'da popup oluşturmak da benzer, bileşen tabanlı bir yol izler.

Vue modal için dialog öğesini kullanmalı mıyım?

Çoğu modal için evet. showModal() ile açılan bir <dialog> sayfanın üstünde durur, sayfanın geri kalanını etkileşime kapatır, odağı içeri taşır ve Escape'e basıldığında cancel olayı tetikler; böylece bir <div>'e göre daha az kod yazarsınız. Açık durumu yine Vue yönetir: cancel olayını engelleyin, open ref'inizi false yapın ve dialog kaldırılmadan önce <Transition>'ın bitmesine izin verin.

Bootstrap'i Vue modallarıyla nasıl entegre ederim?

bootstrap-vue-next paketini kurun (yalnızca Vue 2'yi destekleyen orijinal bootstrap-vue'yu değil). Eklentiyi main.js dosyanızda kaydedin ve Bootstrap'in CSS'ini içe aktarın. Açık/kapalı durum için <BModal> bileşenini v-model ile kullanın. Bileşen hazır header, body ve footer slot'ları, boyut seçenekleri (sm, md, lg, xl) ve kaydırılabilir içerik için props sunar. Tüm props ve olaylar için bootstrap-vue-next dokümantasyonuna bakın.

2026'da Vue modallar için en iyi uygulamalar nelerdir?

Daha temiz modal mantığı için Vue 3'ün Composition API'sini <script setup> ile kullanın. Modalları <Teleport> ile belgenin köküne taşıyın ve showModal() ile açılan <dialog> öğesini tercih edin. Erişilebilirliği baştan kurun: etiketli bir dialog, içeri taşınan ve kapanınca geri dönen odak, Escape ile kapanma. Geçiş süresini 250 ms'nin altında tutun ve azaltılmış hareket tercihine uyun. Ağır içerikli modallarda v-show yerine v-if kullanın. Pazarlama modalları için Popupsmart gibi kodsuz bir araç, yeni bileşen kodu yazmadan hedefleme ve A/B testi ekler.

Vue 2 modal kodu Vue 3 ile uyumlu mu?

Doğrudan değil. Vue 3, bileşenlerdeki v-model'i value/input'tan modelValue/update:modelValue'ya çevirdi, .sync değiştiricisinin yerine v-model argümanlarını getirdi, $on, $off ve $once'ı kaldırdı (bu yüzden event bus ile açılan modallar çalışmaz) ve portal-vue yerine <Teleport>'u ekledi. Vue 2'nin desteği 31 Aralık 2023'te sona erdi; bu yüzden Vue 2 modalı Vue 3 kalıplarına taşınmalı. Vue 3 geçiş rehberi kırıcı değişiklikleri ayrıntılı olarak listeler.

Bir Vue uygulamasına Popupsmart popup'ı nasıl eklenir?

Popupsmart'ın embed kodunu bir kez, uygulamanızın index.html dosyasında kapanış </body> etiketinden önce yapıştırın; bir Vue bileşeninin içine değil. Ardından web sitenizi Popupsmart'ta doğrulayın ve bir kampanya yayınlayın. Popup'ı bir Vue butonundan açmak için Tıklamaya Duyarlı Hedeflemeyi açın ve butonun tıklama fonksiyonundan kampanya kimliğinizle window.ps.show'u çağırın.