@dataplain/notifymessage

Vue component to display a message at a fixed position on the screen.

• Report bugs: https://github.com/dataplain/notifymessage/issues

Install

Create a new vue project:

vue create

Install component:

npm install --save @dataplain/notifymessage

Environment setting

Make a src/plugins folder at the root:

mkdir src/plugins

Configure the notifymessage.js

Create the src/plugins/notifymessage.js:

import Vue from "vue";
import NotifyMessage from "@dataplain/notifymessage";
import "@dataplain/notifymessage/dist/NotifyMessage.css";

Vue.use(NotifyMessage, { NotifyMessageName: "MyNotifyMessage" });

Import notifymessage.js

The "src/main.js" file should look like this:

import Vue from "vue";
import App from "./App.vue";

import "./plugins/notifymessage";

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount("#app");

How to use (example in App.vue)

<template>
    <div>
        <my-notify-message :message="myMessage" customClass="my-custom-class" position="top-left" />

        <my-notify-message message="Another example" customClass="my-custom-class" position="bottom-right">
            <span>[*]</span>
        </my-notify-message>

        <!-- you can use predefined classes from your preferred framework, such as bootstrap -->
        <my-notify-message message="Customized with bootstrap classes" position="bottom-left" customClass="bg-danger text-light p-3">
            <!-- if you use bootstrap-vue, insert a spinner -->
            <b-spinner small />
        </my-notify-message>
    </div>
</template>

<script>
export default {
    data() {
        return {
            myMessage: "Let's go ahead!"
        }
    },
    created() {
        setTimeout(() => {
            this.myMessage = "";
        }, 5000);
    }
}
</script>

<style>
.my-custom-class {
    background-color: black;
    color: white;
    padding: 10px;
}
</style>

Properties

Property	Description	Required	Default
message	Text message to show	no
customClass	CSS Class to apply on message	no
position	Screen position for displaying the message	no	top-right (1)

(1) Valid positions: top-left, top-right, bottom-left, bottom-right

Slot

The default slot can be used to set an icon that is displayed to the left of the message.

Using in the browser

To use directly in the browser, import @dataplain/notifymessage:

<script src="https://unpkg.com/@dataplain/notifymessage" />