/ Basic nuxt setup (some areas still broken)

full-skies-nuxt/components/toast/ToastCard.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="toast-card" :class="[toast.category, closing ? 'closing' : '']">
+    <div class="toast-title">
+      <slot name="title" />
+    </div>
+    <div class="toast-message">
+      <slot name="message" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+import store from '@/store'
+
+export default defineComponent({
+  name: 'ToastCard',
+  props: {
+    toast: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+  data () {
+    return {
+      closing: false
+    }
+  },
+  mounted () {
+    // Starts countdown to initial timer value
+    this.countdown(this.toast.timer)
+  },
+  methods: {
+    // Counts down until 0 is reached
+    countdown (timeToLive) {
+      if (timeToLive > 0) {
+        setTimeout(() => {
+          timeToLive = timeToLive - 1
+          this.countdown(timeToLive)
+        }, 900)
+      } else {
+        // When timer ends
+        this.closing = true
+        setTimeout(() => {
+          this.close()
+        }, 1200)
+      }
+    },
+    close () {
+      store.dispatch('toasts/purgeToast', this.toast.id)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.toast-card {
+  position: relative;
+  width: 300px;
+  padding: 20px 30px 26px;
+  border-radius: 5px;
+  animation: fadeIn 1s cubic-bezier(0.175, 1, 0.32, 1),
+    slideFromRight 1s cubic-bezier(0.175, 1, 0.32, 1);
+  overflow: hidden;
+  .toast-title {
+    margin-bottom: 5px;
+    font-size: 16px;
+    font-weight: $fw-bold;
+  }
+  &:after {
+    position: absolute;
+    display: block;
+    content: "";
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 6px;
+    background: rgba($fs-black, 33%);
+  }
+  &.info {
+    background-color: $info;
+  }
+  &.valid {
+    background-color: $valid;
+  }
+  &.warning {
+    color: $fs-black;
+    background-color: $warning;
+  }
+  &.danger {
+    background-color: $danger;
+  }
+  &.closing {
+    animation: fadeOut 1.2s cubic-bezier(0.175, 1, 0.32, 1),
+      slideFromLeft 1.2s cubic-bezier(0.175, 1, 0.32, 1);
+  }
+}
+</style>

full-skies-nuxt/components/toast/ToastsList.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="toast-wrapper">
+    <div v-for="toast in queue" :key="toast.id" class="toast-item">
+      <toast-card :variant="toast.category" :toast="toast">
+        <template #title>
+          {{ toast.title }}
+        </template>
+        <template #message>
+          {{ toast.message }}
+        </template>
+      </toast-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+import ToastCard from './ToastCard.vue'
+
+export default defineComponent({
+  name: 'ToastsList',
+  components: {
+    ToastCard
+  },
+  computed: {
+    queue () {
+      return this.$store.state.toasts.queue
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.toast-wrapper {
+  position: fixed;
+  top: 90px;
+  height: 100%;
+  right: 0;
+  pointer-events: none;
+  .toast-item {
+    pointer-events: all;
+    margin-right: 20px;
+    margin-bottom: 20px;
+  }
+}
+</style>