Cuenta regresiva con Vue 3 + Vite

En este artículo, vamos a aprender a crear una cuenta regresiva utilizando Vue 3 y Vite.

Prerrequisitos

Antes de comenzar, asegúrate de tener instalado Node.js en tu computadora. También necesitarás tener Vue 3 y Vite instalados globalmente.

Creando el proyecto

Para comenzar, abriremos una terminal y crearemos un nuevo proyecto con Vite:


npm init @vitejs/app countdown-vue3
cd countdown-vue3
npm install


Creando el componente de cuenta regresiva

Creamos un componente llamado Countdown.vue que se encargará de mostrar la cuenta regresiva:

  <template>
    <div>
      <h2>Cuenta regresiva</h2>
      <div>{{ countdown }}</div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        countdown: 10
      }
    },
    created() {
      this.interval = setInterval(() => {
        this.countdown--;
        if (this.countdown === 0) {
          clearInterval(this.interval);
          alert('¡Tiempo agotado!');
        }
      }, 1000);
    },
    beforeUnmount() {
      clearInterval(this.interval);
    }
  }
  </script>
  

Usando el componente en la aplicación

Usamos el componente Countdown en nuestro archivo App.vue:

  <template>
    <div id="app">
      <Countdown />
    </div>
  </template>

  <script>
  import Countdown from './Countdown.vue';

  export default {
    components: {
      Countdown
    }
  }
  </script>
  

Ejecutando la aplicación

Para ejecutar la aplicación, simplemente ejecutamos el siguiente comando en la terminal:


npm run dev


Conclusión

Con esto, hemos creado una cuenta regresiva utilizando Vue 3 y Vite. Puedes personalizar la duración de la cuenta regresiva y el mensaje que se muestra al finalizar el conteo. ¡Espero que hayas encontrado este artículo útil!