UpdatePrompt

The card that says a new version is waiting.

Import it from rei-kit/pwa: import { UpdatePrompt } from 'rei-kit/pwa'

Open UpdatePrompt in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { UpdatePrompt } from 'rei-kit/pwa'

const needRefresh = ref(false)

function reload() {
  location.reload()
}
</script>

<template>
  <UpdatePrompt
    :open="needRefresh"
    title="A new version is ready"
    body="Reload to get it."
    action="Reload"
    dismiss-label="Later"
    @update="reload"
    @dismiss="needRefresh = false"
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`open`	`boolean`	yes
`title`	`string`	yes
`body`	`string`	yes
`action`	`string`	yes
`dismissLabel`	`string`	yes	The X's accessible name. An X on its own has none.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub