hochzeit/src/components/Countdown.vue

<template>
    <vue-countdown :time="time" :interval="1000" v-slot="{ days, hours, minutes, seconds }">
    <div class="time-box">

    
       <div class="time">
        <div class="time-number">{{ days }}</div>
        <div class="time-label">{{ t('Tage') }}</div>
       </div>
       <div class="time">
        <div class="time-number">{{ hours }}</div>
        <div class="time-label">{{ t('Stunden') }}</div>
       </div> 
       <div class="time">
        <div class="time-number">{{ minutes }}</div>
        <div class="time-label">{{ t('Minuten') }}</div>
       </div> 
       <div class="time">
        <div class="time-number">{{ seconds }}</div>
        <div class="time-label">{{ t('Sekunden') }}</div>
       </div> 
       
     </div>
       
       
       
    </vue-countdown>
</template>

<style>
.time-box{
    height: 500px;
    width: 500px;
    margin:0 auto;
}
@media (min-width: 1024px) {
    .time-box{
        padding-top:250px;
        width: 1000px;
    }
}


.time{
    height: 200px;
    width: 200px;
    margin: 25px;
    text-align: center;
    background-color: #6495ed;
    float: left;
    border-radius: 22px;
}

.time-number{
    font-size: 86px;
    font-weight: 600;
    line-height: normal;
    padding-top: 40px;
}

</style>
  
  <script lang="ts">
  import { useI18n } from 'vue-i18n'
  export default {
    data() {
      const now = new Date();
      const newYear = new Date(2025, 6, 11, 14, 30);
      
      return {
        time: newYear.getTime() - now.getTime(),
      }
    },
    setup() {
        const { t } = useI18n({
            inheritLocale: true
          })
          return{
            t
          }
    }
  };
  </script>