Vue Js Automatically Refresh or Reload Page: Vue.js is a progressive JavaScript framework for building user interfaces. To automatically refresh or reload a page in Vue.js, you can make use of the window.location.reload() method. This method will reload the current document, which will refresh the page. You can call this method from within a Vue.js component using a button click event or a lifecycle hook such as mounted() or created(). Alternatively, you can use the setTimeout() function to delay the reload for a specified time period. Overall, reloading a page in Vue.js is a straightforward process that can be achieved with just a few lines of code.

How can you automatically refresh or reload a page in Vue.js ?

This code written in Vue.js creates a web application that automatically reloads the page and displays a brief “toast” message. The toast message will only be visible if the “toastMessage” variable is not empty. The page will be reloaded every 10 seconds, and the toast message will show the current time. The Vue instance includes a “data” object with the “toastMessage” variable, and two methods: “showToast” and “hideToast”. “showToast” displays the message for 5 seconds and then hides it,

Vue js refresh page without reloading Example

<div id="app">
    <h1>Hello, world!</h1>
    <div v-if="toastMessage" class="toast">
       <div>{{ toastMessage }}</div>
       <button @click="hideToast">X</button>
    </div>
</div>
<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    toastMessage: '',
                };
            },
            mounted() {
                setInterval(() => {
                    location.reload();
                }, 10000); // reload every 10 seconds
                this.showToast('Page updated Successfully at ' + new Date().toLocaleTimeString() + '!');
            },
            methods: {
                showToast(message) {
                    this.toastMessage = message;
                    setTimeout(() => {
                        this.toastMessage = '';
                    }, 5000); // hide the toast after 5 seconds
                },
                hideToast() {
                    this.toastMessage = '';
                },
            },
        })
 </script>

Output of Vue Js Auto Refresh or Reload Page