Message component

parent 3e5e563e
Pipeline #2678 passed with stage
in 3 minutes and 27 seconds
......@@ -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"
<div class="hello">
One Hello World wasn't enough :p
export default {
name: "HelloWorld"
<!-- Add "scoped" attribute to limit SCSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
background-color: #ff0000;
\ No newline at end of file
An alert message using Django or Bootstrap message levels
variant: debug, info, success, warning or error
"debug" is mapped to Boostrap secondary color.
"error" is mapped to Boostrap danger color.
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.
So it is not a problem to import all Boostrap here.
<style lang="sass">
@import '~bootstrap'
@import '~bootstrap-vue'
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";
return this.tags;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment