I have an Laravel / Vue.js website and i need to detect when we lost the connection to the server and display an warning on the front.

But i can't find a proper way to do that. I saw that i should use axios like that but i don't know where to put this in my vue...

axios.request(options).catch(function(error) {
if (!error.response) {
  // Connect
} 
else {
  // Disconnect
}

Thanks for your help

I have an Laravel / Vue.js website and i need to detect when we lost the connection to the server and display an warning on the front.

But i can't find a proper way to do that. I saw that i should use axios like that but i don't know where to put this in my vue...

axios.request(options).catch(function(error) {
if (!error.response) {
  // Connect
} 
else {
  // Disconnect
}

Thanks for your help

• javascript
• vue.js
• vuejs2
• axios

1 Answer 1

There is a property in browsers known as onLine which is a boolean that tells the connection status.

Here: navigator.onLine returns a boolean according to the connection status.

UPD: Also there are some events like HTMLElement.ononline and HTMLElement.onoffline.

See this SO answer here: detect change on navigator.online