0.1.4 • Public • Published


    Vue component to display ephemeral text and a countdown progress bar.


    Create a new vue project:

    vue create

    Install component:

    npm install --save @dataplain/timeoutmessage

    Environment setting

    Make a src/plugins folder at the root:

    mkdir src/plugins

    Configure the timeoutmessage.js

    Create the src/plugins/timeoutmessage.js:

    import Vue from "vue";
    import TimeoutMessage from "@dataplain/timeoutmessage";
    import "@dataplain/timeoutmessage/dist/TimeoutMessage.css";
    Vue.use(TimeoutMessage, { TimeoutMessageName: "MyTimeoutMessage" });

    Import timeoutmessage.js

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

    import Vue from "vue";
    import App from "./App.vue";
    import "./plugins/timeoutmessage";
    Vue.config.productionTip = false;
    new Vue({
        render: h => h(App),

    How to use (example in App.vue)

            <my-timeout-message value="Too easy." timeout="3" @timesup="showNextProgressbar" />
            <!-- if you set the message using a variable via v-model, it will be set to empty when times out -->
            <my-timeout-message v-model="anotherMessage" barClass="my-progress-color" textClass="my-progress-text" />
            <!-- you can use predefined classes from your preferred framework, such as bootstrap -->
            <my-timeout-message value="It's also very simple." barClass="bg-primary" textClass="text-primary" />
    export default {
        data() {
            return {
                anotherMessage: ""
        methods: {
            showNextProgressbar() {
                this.anotherMessage = 'Next progress bar!';
    .my-progress-color {
        background-color: green;
    .my-progress-text {
        color: blue;


    Property Description Required Default
    v-model or value Text message to show no
    timeout Time in seconds no 5
    barHeight Bar height no 3px
    barClass CSS Class to apply on progressbar no
    textClass CSS Class to apply on message no


    Event Description
    input To clear the message when time runs out

    Using in the browser

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

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


    npm i @dataplain/timeoutmessage

    DownloadsWeekly Downloads






    Unpacked Size

    146 kB

    Total Files


    Last publish


    • mdauernheimer
    • pauloklaus