vue-addtohomescreen's Introduction

vue-addtohomescreen

Vue-addtohomescreen is a plugin allowing you to trigger a box asking the user if he wants to install the PWA version of your website at the place you want. You can for example display it after a connection process or when reading an article.

Installation

Install it with npm

npm install @owliehq/vue-addtohomescreen

Usage

First, you'll need to initialize the plugin and ask Vue to use it:

import VueAddtohomescreen from "@owliehq/vue-addtohomescreen";
Vue.use(VueAddtohomescreen);

Then add the component where you want

<add-to-homescreen />

with props

<add-to-homescreen lang="fr_FR" />

Or initialize it in Vue script area

this.$addToHomescreen.mount();

with parameters

this.$addToHomescreen.mount({
  lang: "fr_FR",
  iconColor: "#1B2334",
  buttonColor: "#27E9B8",
});

##Parameters list (hope parameters name are explicit enough; for lang, only en_GB & fr_FR available for now, feel free to translate & MR :))

title: {
  type: String,
  default: ''
},
content: {
  type: String,
},
titleColor: {
  type: String,
  default: '#000'
},
contentColor: {
  type: String,
  default: '#000'
},
iconPath: {
  type: String,
  default: ''
},
iconColor: {
  type: String,
  default: '#000'
},
iconTextColor: {
  type: String,
  default: '#fff'
},
buttonColor: {
  type: String,
  default: '#000'
},
buttonTextColor: {
  type: String,
  default: '#fff'
},
background: {
  type: String,
  default: '#fff'
},
lang: {
  type: String,
  default: 'en_GB'
},
expires: {
  type: Number,
  default: 8
}

Credits

Made with <3 in Metz, a small town in France by Owlie. Feel free to patch / edit / optimize / add features. MR are Welcome.

Recommend Projects

dianarenz / vue-addtohomescreen Goto Github PK