alerte.vue

<template>
	<div
		class="alert alert-dismissible fade show"
		:class="classType"
		v-if="error">
		{{ error }}
		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
</template>

<script>
export default {
	props: {
		type: {
			type: String,
			required: true,
			validator: function (value) {
				return (
					[
						"primary",
						"secondary",
						"success",
						"danger",
						"warning",
						"info",
						"light",
						"dark"
					].indexOf(value) !== -1
				)
			}
		},
		error: {
			type: String,
			default: null
		}
	},
	computed: {
		classType() {
			return "alert-" + this.type
		}
	}
}
</script>