VueCraft NPM

SSR, Live Updates & Metadata ​

SSR / Hydration ​

Serialize flags on the server and pass them to the client to prevent hydration mismatches.

ts
// server.ts
import { serializeFlags } from 'vue-feature-toggles'

const provider = createFeatureProvider({ loader: fetchFlags })
await provider.reload()
const ssrState = serializeFlags(provider) // → Record<string, FlagValue>
// embed in HTML: window.__FEATURE_FLAGS__ = ${JSON.stringify(ssrState)}
ts
// client main.ts
app.use(FeatureToggles, {
  ssrState: window.__FEATURE_FLAGS__, // pre-populates flags synchronously
  loader: async () => fetchFlags(), // refreshes in background
})

With the Nuxt module, SSR hydration is handled automatically via nuxtApp.payload.

Live updates (SSE / WebSocket) ​

Flags update in real time when the server pushes changes — no polling required.

ts
// SSE
app.use(FeatureToggles, {
  loader: async () => fetch('/api/flags').then((r) => r.json()),
  liveUpdates: { type: 'sse', url: '/api/flags/stream' },
})

// WebSocket
app.use(FeatureToggles, {
  liveUpdates: {
    type: 'websocket',
    url: 'wss://flags.example.com/ws',
    reconnectDelay: 5000, // ms, default: 3000
  },
})

The server should push a JSON object with the changed flags only — unchanged flags are preserved.

json
{ "betaSearch": true }

Flag metadata & expiry ​

ts
app.use(FeatureToggles, {
  flags: { newDashboard: true, christmasBanner: true },
  meta: {
    newDashboard: {
      description: 'New dashboard with charts',
      owner: 'team-frontend',
      addedAt: '2025-03-01',
      ticket: 'PROJ-1234',
    },
  },
  expiry: {
    christmasBanner: '2025-01-10',
  },
})
ts
const { getFlagMeta, isExpired } = useFeatureProvider()

getFlagMeta('newDashboard') // → { description, owner, addedAt, ticket }
isExpired('christmasBanner') // → true after 2025-01-10

A warning is printed in the dev console for expired flags. Metadata is visible in <FeatureDevTools> and the CLI.