NUXT: The computed property "isOffline" is already defined in data.

[gmirmand]

Hello there,

I'm using your lib for detect offline with Nuxt, so I simply import it as a plugin but it's result to a commons.app.js:11541 [Vue warn]: The computed property "isOffline" is already defined in data. in the console.

Do you have an idea from where does that come from ? Thanks in advance

[tsackit]

Yes, this is because nuxt api have a property with name "isOnline" and "isOffline", see https://nuxtjs.org/api/$nuxt

[filrak]

Interesting. So it looks like a mixin is redundant in Nuxt.

Then I suggest using lib without mixin:

Vue.use(VueOffline, {
    mixin: false
})

[gmirmand]

Interesting. So it looks like a mixin is redundant in Nuxt.

Then I suggest using lib without mixin:

Vue.use(VueOffline, {
    mixin: false
})

The problem with disabling the mixin is that you can't watch the isOffline/isOnline anymore (I didn't find how to watch the $nuxt.isOffline) so I created my own mixin:

export default {
  computed: {
    watchIsOffline() {
      return this.$nuxt.isOffline
    },
    watchIsOnline() {
      return this.$nuxt.isOnline
    }
  }
}

and then I can simply watch my computed properties like :

watch: {
    watchIsOffline(status) {
      console.log('yop')
    }
  }

Is there is a better way to perform this ?

[sudhir600]

Yes., if you are using nuxt framework then there is no need to use 'vue-offline' nuxt has inbuild support for this.

So use this code --

<div v-if="$nuxt.isOffline" class="offline">You are offline</div>

when network up.. this will be hide automatically..