<template> <div> <nuxt /> <b-alert :show="showErrorAlert" dismissible variant="danger" class="status-alert" @dismissed="showErrorAlert=!showErrorAlert" > <p>{{ ErrorAlertMessage }}</p> </b-alert> </div> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState(['ErrorAlertMessage']), showErrorAlert: { get () { return this.$store.state.showErrorAlert }, set () { this.$store.commit('UPDATE_SHOW_ERROR_ALERT', false) } } } } </script> <style> html, body { font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #c4c4c4; font-size: 15px; word-spacing: 1px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; box-sizing: border-box; height: 100%; padding: 0; margin: 0; } a { color: #c4c4c4; } .status-alert { position: fixed; z-index: 1001; top: 55px; right: 10px; width: 400px; max-width: 500px; height: 100px; max-height: 100px; } </style>