Vue Offline Mode Handler

A Vue 3 package for handling offline mode with caching, form persistence, and sync capabilities.

Features

✅ Detect when a user goes offline and display an alert
✅ Cache API responses and sync when back online
✅ Store form data locally and send when the connection is restored
✅ Provide a visual indicator for offline/online status
✅ Customizable hooks for handling offline actions

Installation

npm install vue-offline-mode-handler

Usage

Basic Usage

<template>
  <OfflineIndicator />
</template>

<script setup>
import { OfflineIndicator } from 'vue-offline-mode-handler';
</script>

Using the Composable

<script setup>
import { useOfflineMode } from 'vue-offline-mode-handler';

const {
  isOnline,
  isSyncing,
  pendingRequests,
  pendingForms,
  fetchWithOfflineSupport,
  saveFormData,
  syncPendingData
} = useOfflineMode({
  // Options
  enabled: true,
  offlineMessage: 'You are currently offline',
  onlineMessage: 'Back online!',
  persistForms: true,
  cacheApiResponses: true,
  maxCacheAge: 24 * 60 * 60 * 1000, // 24 hours
  excludeRoutes: ['/api/sensitive-data']
}, {
  // Hooks
  onGoOffline: () => console.log('Gone offline'),
  onGoOnline: () => console.log('Back online'),
  onSyncStart: () => console.log('Starting sync'),
  onSyncComplete: () => console.log('Sync complete'),
  onRequestQueued: (request) => console.log('Request queued', request),
  onFormQueued: (form) => console.log('Form queued', form),
  onError: (error) => console.error('Error', error)
});

// Make API calls with offline support
const fetchData = async () => {
  try {
    const response = await fetchWithOfflineSupport('/api/data');
    const data = await response.json();
    // Handle data
  } catch (error) {
    // Handle error
  }
};

// Save form data for offline sync
const submitForm = async (formData) => {
  await saveFormData({
    id: 'form-1',
    formId: 'contact-form',
    data: formData,
    timestamp: Date.now()
  });
};
</script>

API Reference

useOfflineMode Options

useOfflineMode Hooks

License

MIT