Vue PWA Installer

Adds an $installer interface to Vue instances for installing Progressive Web Apps.

yarn add vue-pwa-installer

Setup

import Vue from "vue"
import VueInstaller from "vue-pwa-installer"
 
Vue.use(VueInstaller, { /* options */ })

Usage

<template>
  <div>
    <div v-if="$installer.canInstall">
      <button @click="$installer.prompt">
    </div>
    <p v-if="$installer.choice">
      User {{$installer.choice}} prompt.
    </p>
    <p v-if="$installer.hasInstalled">
      App installed successfully.
    </p>
  </div>
</template>

Interface

Key	Type	Description
prompt	Function	Prompt the user to install the PWA when available.
choice	String?	User choice following prompt dialog. Either null, "accepted" or "dismissed".
canInstall	Boolean	Can the app be installed via prompt.
hasInstalled	Boolean	Has the app been installed.

NOTE: Support for the underlying API is limited.

Options

Key	Type	Default	Description
prototypeKey	String	$installer	Vue prototype key to add the installer instance to.
storageKey	String	hasInstalledPWA	LocalStorage key to store installed state of the PWA.

Nuxt

To inject a PWA installer into a Nuxt application:

// plugins/installer.js
import Vue from "vue"
import { createInstaller } from "vue-pwa-installer"
 
export default (context, inject) => {
  const installer = createInstaller(Vue, { /* options */ })
  inject("$installer", installer)
}

The $installer interface will now be available in Vue components, Nuxt's app instance and the Vuex store.

Author

Matthew Wagerfield

License

MIT