Vue

Swoff works with any Vue-based project — Vue + Vite, Nuxt, Quasar, or VitePress. The CLI generates composables for your project when you run npx @swoff/cli generate.

Config per flavor

Setting	Vue + Vite	Nuxt	Quasar	VitePress
`build.swOutput`	`"dist"`	`"dist"`	`"dist"`	`"dist"`

Nuxt and Quasar SSR generate a client-side bundle in their respective output directories. Set build.precacheDirs to include that directory if you want to precache the app shell.

Entry point

import { initServiceWorker } from "./swoff/client-injector";

onMounted(() => {
  initServiceWorker();
});

For Nuxt, call initServiceWorker in a client-only plugin or in app.vue wrapped in onMounted. For VitePress, call it in a .vitepress/theme/index.ts setup function.

CLI generation

Run the generator after npx @swoff/cli init:

npx @swoff/cli generate

This creates composables in swoff/adapters/ that map SW events to Vue's reactive system. The naming follows the useSwoff* convention:

import { useSwoffFetch } from "./swoff/adapters/useSwoffFetch";
import { useSwoffNetwork } from "./swoff/adapters/useSwoffNetwork";

Using composables

Each composable returns Vue ref objects that reactively update as the SW dispatches events:

<script setup>
import { useSwoffNetwork } from "./swoff/adapters/useSwoffNetwork";

const { online } = useSwoffNetwork();
</script>

<template>
  <div v-if="!online">You are offline</div>
</template>

See the full adapter list (same useSwoff* API — the React examples translate directly to Vue). All 14 adapters from the React ecosystem are available for Vue as composables.

Build script

Run the SW generator after your build:

node swoff/sw/generator.mjs

Or add it to package.json:

{
  "scripts": {
    "build": "your-build && node swoff/sw/generator.mjs"
  }
}

Adapters (composables)

Once you create composables via the Blueprint, import them like:

import { useSwoffFetch } from "./swoff/adapters/useSwoffFetch";

The naming convention is the same across all frameworks — the adapter layer maps window events to your framework's reactive system. The Blueprint shows the complete event map and a template for creating Vue composables.

Adapters

On this page