Never Punch Manticores


    0.2.0 • Public • Published


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


    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),

    How to use (example in App.vue)

            <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">
            <!-- 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 />
    export default {
        data() {
            return {
                myMessage: "Let's go ahead!"
        created() {
            setTimeout(() => {
                this.myMessage = "";
            }, 5000);
    .my-custom-class {
        background-color: black;
        color: white;
        padding: 10px;


    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


    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="" />


    npm i @dataplain/notifymessage

    DownloadsWeekly Downloads






    Unpacked Size

    138 kB

    Total Files


    Last publish


    • mdauernheimer
    • pauloklaus