Vue Toast

script.vue

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div class="container">
    <section class="toast-messages">
      <Toast v-if="success" message="This is a success message!" :timeout='15' success />
      <Toast v-if="info" message="This is an info message." info />
      <Toast v-if="warning" message="This is a warning message." warning />
      <Toast v-if="danger" message="This is a danger message." danger />
      <Toast v-if="customSuccess" success>
        <strong>Success!</strong> This message uses a slot for custom
        formatting.
      </Toast>
    </section>

    <section class="button-group">
      <button @click='toast("success")' class='button success'>Success</button>
      <button @click='toast("info")' class='button info'>Info</button>
      <button @click='toast("warning")' class='button warning'>Warning</button>
      <button @click='toast("danger")' class='button danger'>Danger</button>
      <button @click='toast("customSuccess")' class='button success'>Custom Success</button>
    </section>
  </div>
</template>

<script>
const Toast = {
  props: {
    success: Boolean,
    info: Boolean,
    warning: Boolean,
    danger: Boolean,
    message: {
      type: String,
      default: "This is a message."
    },
    timeout: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      visible: true
    }
  },
  mounted() {
    if(this.timeout) {
      window.setTimeout(() => {
        this.visible = false
      }, this.timeout * 1000)
    }
  },
  template: `
<transition name='fade'>
  <aside
        v-if='visible'
        class="toast"
        :class="{
            success: success,
            info: info,
            warning: warning,
            danger: danger,

        }"
    >
        <slot>
          {{ message }}
        </slot>
    </aside>
</transition>
  `
};

export default {
  components: { Toast },
  data() {
    return {
      success: false,
      info: false,
      warning: false,
      danger: false,
      customSuccess: false,
    }
  },
  
  methods: {
    toast(type) {
      this[type] = true;
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style lang='scss'>
.container {
  display: grid;
  grid-template-rows: repeat(2, minmax(200px, 1fr));
  place-items: center;
  width: 600px;
  margin: 0 auto;
}
  
  .toast-messages {
    display: grid;
    gap: 1rem;
  }

.toast {
  border-radius: 0.25rem;
  padding: 1rem 0.75rem;
  width: 100%;
}

.success {
  background: #c6f6d5;
  color: #225439;
}

.info {
  background: #bee3f8;
  color: #2a4365;
}

.warning {
  background: #fefcbf;
  color: #744210;
}

.danger {
  background: #fed7d7;
  color: #742a2a;
}
  
  .button-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
  }
  
  .button {
    border: none;
    border-radius: .25rem;
    padding: .25rem .75rem;
    width: 100%;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    
    &.success {
      background: #38a169;
    }
    
    &.info {
      background: #3182ce;
    }
    
    &.warning {
      background: #f6e05e;
    }
    
    &.danger {
      background: #e53e3e;
    }
  }
  
  .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

vue-toast.markdown

Vue Toast

A simple toast component with a timeout and type api. Allows you to pass in the # of seconds before it fades out, and pass in a generic type like 'success' for styling. Contains a default slot that either shows a message passed as a prop, or allows you to pass in. custom HTML for formatting more fine-grain formatting.

A Pen by Ronnie Villarini on CodePen.

License.