Slots

Alert.vue

<template>
  <div class="wrapper" :class="level">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    level: { type: String, default: 'error' }
  }
}
</script>

<style scoped>
.wrapper { border-radius: 5px; margin: 5px; padding: 10px; }
.right { float: right; }

.info { color: #004085; background-color: #cce5ff; border: 1px solid #b8daff; }
.warn { color: #856404; background-color: #fff3cd; border: 1px solid #ffeeba; }
.error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; }
</style>