App.vue

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { RouterView } from 'vue-router'

import { useSessionStore } from '@/stores/session'

const session = useSessionStore()

function onConnectionChange(event) {
  if (event.type === 'online') {
    session.setConnectionState(true)
  } else {
    session.setConnectionState(false)
  }
}

onMounted(() => {
  if ('onLine' in navigator) {
    session.setConnectionState(navigator.onLine)
    
    window.addEventListener('online', onConnectionChange)
    window.addEventListener('offline', onConnectionChange)
  }
})

onUnmounted(() => {
  window.removeEventListener('online', onConnectionChange)
  window.removeEventListener('offline', onConnectionChange)
})
</script>

<template>
  <RouterView />
</template>

<style>
#app {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>