@crtxio/notification v0.0.2

@crtxio/notification

@crtxio/notification is a Nuxt3 layer which provides components to slide in status updates.

Setup

Make sure to install the dependencies:

npm install --save @crtxio/notification

or

yarn add @crtxio/notification

Add the dependency to your extends in nuxt.config:

defineNuxtConfig({
  extends: [
    '@crtxio/notification'
  ]
})

How to use it

Components

<template>
  <TopDown v-if="toggle" twCssClasses="bg-slate-500 text-white text-xl p-4 sm:p-0 sm:text-3xl">
    <div class="w-full grid place-items-center font-semibold">
      {{ message }}
    </div>
  </TopDown>
  <div @click="showNotification()" class="border w-fit p-2 rounded-md bg-slate-300 cursor-pointer">
    click
  </div>
</template>

<script>
  export default {
    data() {
      return{
        toggle: false,
        message: "This is a message!"
      }
    },
    methods: {
      showNotification() {
            this.toggle = true;

            setTimeout(() => {
                this.toggle = false;
            }, 2000);
        },
    }
  }
</script>