Swoff - Build Offline-First Web Apps

Vue + Vite

Concise adapter for Vue 3 + Vite projects.

Create Project

npm create vite@latest my-app -- --template vue-ts
cd my-app && npm install

Project Structure

my-app
├── src
│   └── main.ts
├── swoff
│   ├── sw-template.js
│   ├── sw-generator.js
│   ├── sw-injector.js
│   └── swoff.d.ts
└── package.json

Entry Point (`src/main.ts`)

import { createApp } from "vue";
import App from "./App.vue";
import { initServiceWorker } from "../swoff/sw-injector";

initServiceWorker();

createApp(App).mount("#app");

Add Patterns

Copy from Patterns:

SW Template → swoff/sw-template.js
Build Script → swoff/sw-generator.js (output dir: dist/)
Client Registration → swoff/sw-injector.js
TypeScript Declarations → swoff/swoff.d.ts

Update package.json:

{
  "scripts": {
    "build": "vite build && node swoff/sw-generator.js"
  }
}

Output Directory

Vite outputs to dist/ by default. Your swoff/sw-generator.js should write to dist/.

Build & Test

npm version patch
npm run build

Next Steps

Vue Composables — all generated composables
Vue Components — UpdatePrompt, SWProgressBar

Vue + Vite

On this page