Merhaba! Ben Aykhan, 1999 doğumlu bir Azerbaycanlıyım ve 2017 yılından bu yana programlamayla ilgileniyorum. Teknolojinin büyülü dünyası beni her zaman etkilemiştir ve bu merakımı kendi blogumda paylaşarak daha geniş bir kitleyle buluşturmayı amaçlıyorum.

"Nuxt.js ile Dinamik Saat Bileşeni Oluşturma"
Günümüz modern web uygulamalarında, kullanıcı deneyimini artırmak için gerçek zamanlı öğeler sıkça kullanılmaktadır. Bunlardan biri de saat bileşenleridir. Bu makalede, Nuxt.js kullanarak bir dinamik saat bileşeni oluşturacağız.
📌 Neden Dinamik Saat Bileşeni Kullanmalıyız?
-
Gerçek zamanlı güncelleme sağlar.
-
Kullanıcıya lokal saat hakkında bilgi verir.
-
Vue.js reaktif sistemini kullanarak verimli bir yapı sunar.
🎯 Proje Yapılandırması
Eğer Nuxt.js projeniz yoksa, aşağıdaki komut ile yeni bir proje oluşturabilirsiniz:
npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev
Bu işlemlerden sonra Nuxt 3 projemiz hazır olacaktır. Şimdi saat bileşenimizi oluşturalım.
🕒 Saat Bileşeni (Clock.vue)
components/Clock.vue dosyasını oluşturun ve aşağıdaki kodları ekleyin:
<template>
<div class="menu-item text-theme">
Local time |
<span class="clock" v-html="clock"></span>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const clock = ref("");
function updateClock() {
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
clock.value = `${hours}<span class='colon'>:</span>${minutes}<span class='colon'>:</span>${seconds}`;
}
onMounted(() => {
updateClock();
setInterval(updateClock, 1000);
});
</script>
🚀 Açıklamalar
-
ref
: Vue'nun reaktif değişkenlerinden biri olanref
kullanarak saat değerini güncelliyoruz. -
onMounted
: Bileşen yüklendiğinde ilk saat değerini ayarlıyoruz. -
setInterval
: Her 1 saniyede bir saati güncellemek için kullanıyoruz.
📌 Bileşeni Kullanma
Şimdi bileşeni sayfamızda kullanabiliriz. pages/index.vue dosyasını açarak aşağıdaki gibi bileşeni ekleyelim:
<template>
<div>
<Clock />
</div>
</template>
<script setup>
import Clock from "~/components/Clock.vue";
</script>
Bu şekilde Nuxt.js uygulamanızda çalışan gerçek zamanlı bir saat bileşeni oluşturmuş oldunuz! 🎉
🎨 CSS ile Özelleştirme
Saat bileşeninin daha şık görünmesi için aşağıdaki CSS kodlarını assets/css/global.css dosyanıza ekleyebilirsiniz:
.clock {
font-size: 20px;
font-weight: bold;
color: #3498db;
}
.colon {
color: red;
}
🛠 Sonuç
Artık Nuxt.js kullanarak dinamik ve şık bir saat bileşeni oluşturmayı öğrendik. Bu bileşeni projenizde kullanarak kullanıcılarınıza anlık saat gösterebilirsiniz. 🚀
Eğer bu rehberi beğendiyseniz, daha fazla Vue.js ve Nuxt.js içerikleri için takipte kalın! 😊