{"id":35018,"date":"2025-11-24T22:41:35","date_gmt":"2025-11-24T19:41:35","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35018"},"modified":"2025-11-24T22:41:35","modified_gmt":"2025-11-24T19:41:35","slug":"vue-js-uygulamalarinda-basit-modal-bildirimler-vue-sweetalert2-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinda-basit-modal-bildirimler-vue-sweetalert2-rehberi\/","title":{"rendered":"Vue.js Uygulamalar\u0131nda Basit Modal Bildirimler: Vue-SweetAlert2 Rehberi"},"content":{"rendered":"

<\/p>\n

Vue.js Uygulamalar\u0131nda Basit Modal Bildirimler: Vue-SweetAlert2 Rehberi<\/h2>\n
Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimi (UX) kritik \u00f6neme sahiptir. Kullan\u0131c\u0131ya bilgi vermek, onay almak veya bir eylemin sonucunu bildirmek i\u00e7in kullan\u0131lan standart taray\u0131c\u0131 uyar\u0131lar\u0131 (`alert()<\/code>, confirm()<\/code>) genellikle \u00e7irkin, \u00f6zelle\u015ftirilemez ve kullan\u0131c\u0131 ak\u0131\u015f\u0131n\u0131 bozan bir yap\u0131ya sahiptir. \u0130\u015fte tam bu noktada, \u015f\u0131k ve i\u015flevsel modal bildirim k\u00fct\u00fcphaneleri devreye girer. Bu rehberde, Vue.js projelerinizde SweetAlert2’nin g\u00fcc\u00fcn\u00fc vue-sweetalert2<\/code> entegrasyonu ile nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n`
`SweetAlert2<\/strong>, estetik a\u00e7\u0131dan ho\u015f, duyarl\u0131 ve olduk\u00e7a \u00f6zelle\u015ftirilebilir uyar\u0131 kutular\u0131 olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Vue-SweetAlert2<\/strong> ise bu k\u00fct\u00fcphaneyi Vue.js ekosistemine sorunsuz bir \u015fekilde entegre ederek, this.$swal<\/code> gibi pratik y\u00f6ntemlerle bile\u015fenleriniz i\u00e7inde kolayca kullanman\u0131z\u0131 sa\u011flar.<\/p>\n`

Vue.js Projenize Vue-SweetAlert2 Entegre Etme<\/h3>\nVue.js projenize SweetAlert2’yi dahil etmek olduk\u00e7a basittir. Mevcut bir Vue projeniz oldu\u011funu varsayarak a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyelim:<\/p>\n
1. Paketleri Kurulum<\/h4>\n\u00d6ncelikle, SweetAlert2 ve Vue-SweetAlert2 paketlerini projenize y\u00fcklemeniz gerekiyor. Terminalinizi a\u00e7\u0131n ve projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
\n    npm install sweetalert2 vue-sweetalert2\n    # veya\n    yarn add sweetalert2 vue-sweetalert2\n    <\/code><\/pre>\n2. Global Entegrasyon (main.js\/main.ts)<\/h4>\nvue-sweetalert2<\/code>‘yi uygulaman\u0131z\u0131n her yerinden eri\u015filebilir k\u0131lmak i\u00e7in genellikle main.js<\/code> (veya TypeScript kullan\u0131yorsan\u0131z main.ts<\/code>) dosyan\u0131zda global olarak kaydedilir. Bu, herhangi bir Vue bile\u015feniniz i\u00e7inde this.$swal<\/code> arac\u0131l\u0131\u011f\u0131yla SweetAlert2 fonksiyonlar\u0131na eri\u015fmenizi sa\u011flar.<\/p>\n
\n    \/\/ main.js veya main.ts\n    import { createApp } from 'vue';\n    import App from '.\/App.vue';\n\n    import VueSweetalert2 from 'vue-sweetalert2';\n    import 'sweetalert2\/dist\/sweetalert2.min.css'; \/\/ SweetAlert2'nin varsay\u0131lan stilini dahil edin\n\n    const app = createApp(App);\n\n    \/\/ VueSweetalert2'yi global olarak kaydedin\n    \/\/ \u0130ste\u011fe ba\u011fl\u0131 olarak, varsay\u0131lan ayarlar\u0131 burada belirleyebilirsiniz\n    const options = {\n        confirmButtonColor: '#41b882', \/\/ Vue ye\u015fili\n        cancelButtonColor: '#ff7674', \/\/ K\u0131rm\u0131z\u0131\n        \/\/ Di\u011fer varsay\u0131lan se\u00e7enekler buraya eklenebilir\n    };\n    app.use(VueSweetalert2, options);\n\n    app.mount('#app');\n    <\/code><\/pre>\nYukar\u0131daki \u00f6rnekte, app.use(VueSweetalert2, options);<\/code> sat\u0131r\u0131, SweetAlert2’yi Vue uygulamas\u0131na bir eklenti olarak ekler. options<\/code> nesnesi, t\u00fcm SweetAlert2 bildirimleriniz i\u00e7in ge\u00e7erli olacak varsay\u0131lan ayarlar\u0131 tan\u0131mlaman\u0131za olanak tan\u0131r. \u00d6rne\u011fin, onay ve iptal d\u00fc\u011fmelerinin renklerini global olarak de\u011fi\u015ftirebilirsiniz.<\/p>\n
Temel Kullan\u0131m Senaryolar\u0131<\/h3>\nSweetAlert2’yi projenize ba\u015far\u0131yla entegre ettikten sonra, \u00e7e\u015fitli bildirim t\u00fcrlerini kolayca olu\u015fturabilirsiniz. \u0130\u015fte en yayg\u0131n kullan\u0131m senaryolar\u0131:<\/p>\n
1. Basit Bilgi Bildirimi<\/h4>\nKullan\u0131c\u0131ya basit bir mesaj g\u00f6stermek i\u00e7in en temel kullan\u0131m \u015feklidir. Genellikle bir i\u015flemin ba\u015far\u0131yla tamamland\u0131\u011f\u0131n\u0131, bir hatay\u0131 veya genel bir bilgiyi iletmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\n