Message component

package.json

@@ -9,6 +9,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bootstrap": "^4.4.1",
+    "bootstrap-vue": "^2.12.0",
     "core-js": "^3.6.4",
     "vue": "^2.6.11"
   },

static/components/HelloWorld2.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="hello">
-    <h3>
-      One Hello World wasn't enough :p
-    </h3>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld"
-};
-</script>
-
-<!-- Add "scoped" attribute to limit SCSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-  background-color: #ff0000;
-}
-</style>

static/components/Message.vue

@@ -0,0 +1,57 @@
+<!--
+An alert message using Django or Bootstrap message levels
+
+props:
+  variant: debug, info, success, warning or error
+
+"debug" is mapped to Boostrap secondary color.
+"error" is mapped to Boostrap danger color.
+-->
+
+<template>
+  <b-alert
+    :variant="variant"
+    dismissible
+    show
+    fade
+  >
+    <slot></slot>
+  </b-alert>
+</template>
+
+<!--
+Many modern browsers implement an optimization for <style> tags either cloned
+from a common node or that have identical text, to allow them to share a single
+backing stylesheet. With this optimization the performance of external and
+internal styles should be similar.
+From https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
+
+So it is not a problem to import all Boostrap here.
+-->
+<style lang="sass">
+@import '~bootstrap'
+@import '~bootstrap-vue'
+</style>
+
+<script>
+import Vue from "vue";
+import { BAlert } from "bootstrap-vue";
+Vue.component("b-alert", BAlert);
+
+export default {
+  name: "Message",
+  props: ["tags"],
+  computed: {
+    variant: function() {
+      switch (this.tags) {
+        case "error":
+          return "danger";
+        case "debug":
+          return "secondary";
+        default:
+          return this.tags;
+      }
+    }
+  }
+};
+</script>