{"id":37816,"date":"2026-01-16T07:40:43","date_gmt":"2026-01-16T04:40:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37816"},"modified":"2026-01-16T07:40:43","modified_gmt":"2026-01-16T04:40:43","slug":"vue-jste-vue-mq-ile-duyarli-tasarim-uygulamasi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-jste-vue-mq-ile-duyarli-tasarim-uygulamasi\/","title":{"rendered":"Vue.js’te vue-mq ile Duyarl\u0131 Tasar\u0131m Uygulamas\u0131"},"content":{"rendered":"

<\/p>\n

Vue.js’te vue-mq ile Duyarl\u0131 Tasar\u0131m Uygulamas\u0131<\/h2>\n

Giri\u015f: Duyarl\u0131 Tasar\u0131m\u0131n \u00d6nemi ve Vue.js Ekosistemi<\/h3>\n

G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar\u0131n web sitelerine ve uygulamalar\u0131na eri\u015fmek i\u00e7in kulland\u0131klar\u0131 cihaz \u00e7e\u015fitlili\u011fi hi\u00e7 bu kadar fazla olmam\u0131\u015ft\u0131. Ak\u0131ll\u0131 telefonlardan tabletlere, diz\u00fcst\u00fc bilgisayarlardan ultra geni\u015f masa\u00fcst\u00fc ekranlara kadar her cihazda sorunsuz ve optimal bir kullan\u0131c\u0131 deneyimi sunmak, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. \u0130\u015fte bu noktada “duyarl\u0131 tasar\u0131m” (responsive design) kavram\u0131 devreye girer. Duyarl\u0131 tasar\u0131m, bir web sitesinin veya uygulaman\u0131n, kullan\u0131c\u0131n\u0131n ekran boyutu, \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc ve cihaz y\u00f6n\u00fc ne olursa olsun kendini otomatik olarak uyarlayabilmesi yetene\u011fini ifade eder. Bu, sadece estetik bir gereklilik de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 memnuniyeti, eri\u015filebilirlik, SEO performans\u0131 ve i\u015f hedeflerine ula\u015fma a\u00e7\u0131s\u0131ndan kritik bir fakt\u00f6rd\u00fcr.<\/p>\n

Vue.js, hafif yap\u0131s\u0131, esnekli\u011fi ve bile\u015fen tabanl\u0131 mimarisi sayesinde modern tek sayfa uygulamalar\u0131 (SPA) geli\u015ftirmek i\u00e7in pop\u00fcler bir JavaScript \u00e7er\u00e7evesidir. Vue.js ile g\u00fc\u00e7l\u00fc ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak kolay olsa da, bu aray\u00fczlerin farkl\u0131 ekran boyutlar\u0131nda nas\u0131l davranaca\u011f\u0131n\u0131 y\u00f6netmek, \u00f6zellikle karma\u015f\u0131k uygulamalarda, baz\u0131 zorluklar\u0131 beraberinde getirebilir. Geleneksel CSS medya sorgular\u0131, genel sayfa d\u00fczeni i\u00e7in harika olsa da, Vue bile\u015fenleri i\u00e7indeki dinamik davran\u0131\u015flar\u0131 veya bile\u015fenlerin \u00f6zelliklerini (props) ekran boyutuna g\u00f6re de\u011fi\u015ftirmeyi gerektiren senaryolarda yetersiz kalabilir. \u00d6rne\u011fin, mobil g\u00f6r\u00fcn\u00fcmde bir navigasyon men\u00fcs\u00fcn\u00fc hamburger men\u00fcye d\u00f6n\u00fc\u015ft\u00fcrmek, masa\u00fcst\u00fcnde ise tam bir men\u00fc olarak g\u00f6stermek veya bir bile\u015fenin belirli bir ekran boyutunda tamamen farkl\u0131 bir versiyonunu render etmek gibi durumlar, sadece CSS ile y\u00f6netilmesi zor veya imkans\u0131z olan lojik gerektirir.<\/p>\n

\u0130\u015fte bu noktada vue-mq<\/code> gibi \u00f6zel Vue.js eklentileri devreye girer. vue-mq<\/code>, Vue uygulamalar\u0131n\u0131za reaktif medya sorgular\u0131 entegre ederek, bile\u015fenlerinizin ekran boyutuna g\u00f6re dinamik olarak tepki vermesini sa\u011flayan g\u00fc\u00e7l\u00fc ve esnek bir \u00e7\u00f6z\u00fcmd\u00fcr. Bu makalede, vue-mq<\/code>‘nun ne oldu\u011funu, nas\u0131l kuruldu\u011funu, temel ve ileri d\u00fczey kullan\u0131m senaryolar\u0131n\u0131, en iyi uygulamalar\u0131 ve alternatiflerini detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Amac\u0131m\u0131z, Vue.js projelerinizde duyarl\u0131 tasar\u0131m\u0131 vue-mq<\/code> ile nas\u0131l etkin bir \u015fekilde uygulayabilece\u011finizi ad\u0131m ad\u0131m g\u00f6stermektir.<\/p>\n

Duyarl\u0131 Tasar\u0131m\u0131n Temelleri ve Vue.js Ba\u011flam\u0131nda Zorluklar\u0131<\/h3>\n

Duyarl\u0131 tasar\u0131m, genellikle a\u015fa\u011f\u0131daki temel prensiplere dayan\u0131r:<\/p>\n

* Esnek Izgaralar (Fluid Grids):<\/strong> Sabit piksel de\u011ferleri yerine y\u00fczde veya di\u011fer g\u00f6receli birimler (vw, vh, rem, em) kullanarak d\u00fczenin ekran boyutuna g\u00f6re esnemesini veya k\u00fc\u00e7\u00fclmesini sa\u011flar. Flexbox ve CSS Grid, bu konuda modern ve g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r.
\n* Esnek G\u00f6rseller ve Medya (Flexible Images and Media):<\/strong> G\u00f6rsellerin ve videolar\u0131n kapsay\u0131c\u0131lar\u0131na g\u00f6re boyutland\u0131r\u0131lmas\u0131n\u0131 ve ta\u015fmamas\u0131n\u0131 sa\u011flar (\u00f6rne\u011fin max-width: 100%; height: auto;<\/code>).
\n* Medya Sorgular\u0131 (Media Queries):<\/strong> Belirli ekran boyutlar\u0131na, \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklere, cihaz y\u00f6nlerine veya di\u011fer \u00f6zelliklere g\u00f6re farkl\u0131 CSS kurallar\u0131n\u0131n uygulanmas\u0131n\u0131 sa\u011flayan CSS \u00f6zellikleridir. \u00d6rne\u011fin, min-width<\/code> veya max-width<\/code> ile farkl\u0131 stiller tan\u0131mlanabilir.
\n* Viewport Meta Etiketi:<\/strong> Mobil cihazlarda sayfan\u0131n do\u011fru bir \u015fekilde \u00f6l\u00e7eklenmesini ve g\u00f6r\u00fcnt\u00fclenmesini sa\u011flamak i\u00e7in HTML <\/code> etiketine eklenen kritik bir etikettir: <\/code>.
\n* Mobil \u00d6ncelik (Mobile-First Approach):<\/strong> Tasar\u0131m s\u00fcrecine en k\u00fc\u00e7\u00fck ekran boyutundan ba\u015flayarak, daha sonra daha b\u00fcy\u00fck ekranlar i\u00e7in geli\u015ftirmeler yapma felsefesidir. Bu yakla\u015f\u0131m, performans ve kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan genellikle daha verimli sonu\u00e7lar verir.<\/p>\n

Vue.js gibi bile\u015fen tabanl\u0131 bir \u00e7er\u00e7evede geli\u015ftirme yaparken, bu temel prensipleri uygulamak genellikle CSS arac\u0131l\u0131\u011f\u0131yla m\u00fcmk\u00fcnd\u00fcr. Ancak, baz\u0131 senaryolarda sadece CSS medya sorgular\u0131 yetersiz kalabilir:<\/p>\n

* Bile\u015fen Seviyesinde Lojik:<\/strong> Bir bile\u015fenin i\u00e7indeki veri veya davran\u0131\u015f\u0131n ekran boyutuna g\u00f6re de\u011fi\u015fmesi gerekti\u011finde (\u00f6rne\u011fin, bir veri tablosunun mobil g\u00f6r\u00fcn\u00fcmde liste olarak, masa\u00fcst\u00fcnde tablo olarak render edilmesi).
\n* Dinamik Bile\u015fen De\u011fi\u015fimi:<\/strong> Belirli bir breakpoint’te tamamen farkl\u0131 bir bile\u015fenin g\u00f6sterilmesi veya gizlenmesi gerekti\u011finde.
\n* Prop De\u011fi\u015fimi:<\/strong> Bir bile\u015fenin ald\u0131\u011f\u0131 \u00f6zelliklerin (props) ekran boyutuna g\u00f6re farkl\u0131 de\u011ferler almas\u0131 gerekti\u011finde (\u00f6rne\u011fin, bir Slider<\/code> bile\u015feninin mobil g\u00f6r\u00fcn\u00fcmde 1, masa\u00fcst\u00fcnde 3 \u00f6\u011fe g\u00f6stermesi).
\n* JavaScript Tabanl\u0131 Etkile\u015fimler:<\/strong> JavaScript ile tetiklenen animasyonlar\u0131n, olay dinleyicilerinin veya di\u011fer etkile\u015fimlerin ekran boyutuna g\u00f6re farkl\u0131la\u015fmas\u0131 gerekti\u011finde.<\/p>\n

Bu t\u00fcr senaryolarda, sadece CSS ile \u00e7\u00f6z\u00fcm \u00fcretmek, ya \u00e7ok karma\u015f\u0131k CSS kurallar\u0131na yol a\u00e7ar ya da JavaScript taraf\u0131nda window.matchMedia<\/code> gibi taray\u0131c\u0131 API’lerini manuel olarak dinlemeyi gerektirir. Bu da kod tekrar\u0131na, bak\u0131m\u0131 zor bir yap\u0131ya ve performans sorunlar\u0131na yol a\u00e7abilir. \u0130\u015fte vue-mq<\/code> tam da bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n

Vue-mq Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n

vue-mq<\/code>, Vue.js uygulamalar\u0131n\u0131za reaktif medya sorgular\u0131 entegre eden hafif ve esnek bir eklentidir. Temel amac\u0131, uygulaman\u0131z\u0131n mevcut ekran boyutunu tan\u0131mlad\u0131\u011f\u0131n\u0131z breakpoint’lere g\u00f6re izlemesini ve bu durumu Vue reaktivite sistemi arac\u0131l\u0131\u011f\u0131yla bile\u015fenlerinize sunmas\u0131n\u0131 sa\u011flamakt\u0131r. Bu sayede, JavaScript kodunuz i\u00e7inde veya do\u011frudan \u015fablonlar\u0131n\u0131zda mevcut breakpoint’e g\u00f6re ko\u015fullu render, stil veya davran\u0131\u015f de\u011fi\u015fiklikleri uygulayabilirsiniz.<\/p>\n

vue-mq<\/code>‘nun \u00e7al\u0131\u015fma prensibi olduk\u00e7a basittir:<\/p>\n

1. Breakpoint Tan\u0131mlamas\u0131:<\/strong> Uygulaman\u0131z\u0131n ba\u015flang\u0131c\u0131nda (genellikle main.js<\/code> dosyas\u0131nda), uygulaman\u0131z\u0131n hangi ekran geni\u015fliklerini hangi “breakpoint” isimleriyle tan\u0131yaca\u011f\u0131n\u0131 belirlersiniz. \u00d6rne\u011fin, mobile<\/code>, tablet<\/code>, desktop<\/code> gibi. Bu tan\u0131mlamalar, CSS medya sorgular\u0131ndaki min-width<\/code> de\u011ferlerine benzer \u015fekilde \u00e7al\u0131\u015f\u0131r.
\n2. Ekran Boyutu \u0130zleme:<\/strong> vue-mq<\/code>, taray\u0131c\u0131n\u0131n resize<\/code> olay\u0131n\u0131 dinleyerek mevcut ekran geni\u015fli\u011fini s\u00fcrekli izler.
\n3. Aktif Breakpoint Belirleme:<\/strong> \u0130zlenen ekran geni\u015fli\u011finin, tan\u0131mlad\u0131\u011f\u0131n\u0131z breakpoint’lerden hangisine denk geldi\u011fini tespit eder. \u00d6rne\u011fin, ekran geni\u015fli\u011fi 768 piksel ise ve siz 768px’ten itibaren tablet<\/code> breakpoint’ini tan\u0131mlad\u0131ysan\u0131z, tablet<\/code> aktif breakpoint olur.
\n4. Reaktif Durum Sa\u011flama:<\/strong> Tespit edilen aktif breakpoint’i Vue’nun reaktivite sistemi arac\u0131l\u0131\u011f\u0131yla uygulaman\u0131z\u0131n her yerine $mq<\/code> global \u00f6zelli\u011fi veya <\/code> bile\u015feni arac\u0131l\u0131\u011f\u0131yla sunar. Bu sayede, aktif breakpoint de\u011fi\u015fti\u011finde, ilgili bile\u015fenler otomatik olarak g\u00fcncellenir.<\/p>\n

Bu mekanizma sayesinde, CSS medya sorgular\u0131 ile yapamad\u0131\u011f\u0131n\u0131z veya yapmakta zorland\u0131\u011f\u0131n\u0131z bir\u00e7ok dinamik duyarl\u0131 tasar\u0131m senaryosunu kolayca y\u00f6netebilirsiniz.<\/p>\n

Vue-mq Kurulumu ve Temel Kullan\u0131m<\/h3>\n

vue-mq<\/code>‘yu projenize dahil etmek olduk\u00e7a basittir.<\/p>\n

1. Kurulum<\/h4>\n

\u00d6ncelikle, projenize vue-mq<\/code> paketini npm veya yarn ile kurman\u0131z gerekir:<\/p>\n

npm install vue-mq\n
veya<\/h2>\nyarn add vue-mq<\/code><\/pre>\n
2. Plugin Kayd\u0131 ve Breakpoint Tan\u0131mlamas\u0131<\/h4>\n
Kurulumdan sonra, vue-mq<\/code>‘yu Vue uygulaman\u0131zda bir eklenti olarak kaydetmeniz ve uygulaman\u0131z\u0131n kullanaca\u011f\u0131 breakpoint’leri tan\u0131mlaman\u0131z gerekir. Bu i\u015flem genellikle main.js<\/code> dosyas\u0131nda yap\u0131l\u0131r:<\/p>\n
\/\/ main.js\nimport { createApp } from 'vue';\nimport App from '.\/App.vue';\nimport VueMq from 'vue-mq'; \/\/ vue-mq'yu import edin\n\nconst app = createApp(App);\n\napp.use(VueMq, {\n  breakpoints: {\n    mobile: 768, \/\/ 768px'e kadar mobil cihazlar\n    tablet: 1200, \/\/ 768px'ten 1200px'e kadar tabletler\n    desktop: Infinity, \/\/ 1200px ve \u00fczeri masa\u00fcst\u00fc cihazlar\n  },\n  defaultBreakpoint: 'desktop' \/\/ Varsay\u0131lan breakpoint (iste\u011fe ba\u011fl\u0131)\n});\n\napp.mount('#app');<\/code><\/pre>\n
breakpoints<\/code> Nesnesi:<\/strong> Bu nesne, uygulaman\u0131z\u0131n farkl\u0131 ekran boyutlar\u0131n\u0131 nas\u0131l s\u0131n\u0131fland\u0131raca\u011f\u0131n\u0131 tan\u0131mlar. Anahtarlar (\u00f6rne\u011fin mobile<\/code>, tablet<\/code>, desktop<\/code>) breakpoint’lerin isimleridir ve de\u011ferleri (\u00f6rne\u011fin 768<\/code>, 1200<\/code>) bu breakpoint’in ba\u015flad\u0131\u011f\u0131 minimum piksel geni\u015fli\u011fini (dahil) temsil eder. Infinity<\/code> de\u011feri, o breakpoint’in bir \u00fcst s\u0131n\u0131r\u0131 olmad\u0131\u011f\u0131n\u0131 belirtir.<\/p>\n
Yukar\u0131daki \u00f6rnekte:
\n*   mobile<\/code>: Ekran geni\u015fli\u011fi 0<\/code> ile 767px<\/code> aras\u0131. (\u00c7\u00fcnk\u00fc tablet<\/code> 768’den ba\u015fl\u0131yor.)
\n*   tablet<\/code>: Ekran geni\u015fli\u011fi 768px<\/code> ile 1199px<\/code> aras\u0131. (\u00c7\u00fcnk\u00fc desktop<\/code> 1200’den ba\u015fl\u0131yor.)
\n*   desktop<\/code>: Ekran geni\u015fli\u011fi 1200px<\/code> ve \u00fczeri.<\/p>\n
defaultBreakpoint<\/code>:<\/strong> (\u0130ste\u011fe ba\u011fl\u0131) Bu ayar, sunucu taraf\u0131 olu\u015fturma (SSR) gibi durumlarda veya ba\u015flang\u0131\u00e7ta hen\u00fcz bir ekran boyutu tespit edilmemi\u015fken hangi breakpoint’in varsay\u0131lan olarak kabul edilece\u011fini belirtir.<\/p>\n
Reaktif Breakpoint Durumlar\u0131na Eri\u015fim: $mq Global \u00d6zelli\u011fi<\/h3>\n
vue-mq<\/code>‘yu kurduktan sonra, Vue bile\u015fenleriniz i\u00e7inde mevcut aktif breakpoint’e reaktif olarak eri\u015fmek i\u00e7in $mq<\/code> global \u00f6zelli\u011fini kullanabilirsiniz. Bu \u00f6zellik, mevcut aktif breakpoint’in ad\u0131n\u0131 i\u00e7eren bir dize (string) d\u00f6nd\u00fcr\u00fcr.<\/p>\n
1. \u015eablon \u0130\u00e7inde Kullan\u0131m (Template Usage)<\/h4>\n
Do\u011frudan bile\u015fen \u015fablonunuzda $mq<\/code>‘yu kullanarak ko\u015fullu renderlama yapabilirsiniz:<\/p>\n
\n