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 | &nbsp;
    <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 olan ref 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! 😊