Skip to content

CodeCoupler Application Basics PWA Handling Vue 🔒

What is this?

This Vue component uses @codecoupler-pro/app-pwa to display an icon as soon as the browser detects a PWA and offers to install it. Depending on whether a desktop or mobile browser is detected, the appropriate icon is displayed.

Setup

Install Bundle:

1
npm i vue @codecoupler-pro/ui-bundle

Define Aliases, Externals and Assets:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  module: "@codecoupler-pro/app-pwa-vue",
  global: ["codecoupler", "app", "pwaVue"]
},
{
  module: "@codecoupler-pro/ui-bundle",
  global: ["codecoupler", "ui", "bundle"],
  entries: [
    "dist/codecoupler-pro-ui-bundle.js"
  ]
}

Basic Usage

Use it with JavaScript:

1
2
3
4
5
6
7
8
9
import { PWAVue } from "@codecoupler-pro/app-pwa-vue";
import { PWA } from "@codecoupler-pro/app-pwa";
import { createApp } from "vue";

let vueApp = createApp(PWAVue, {
  pwa: new PWA(),
  /* optional additional props */
});
vueApp.mount(element);

Use it as a CodeCoupler Costa Component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { PWAVue } from "@codecoupler-pro/app-pwa-vue";
import { PWA } from "@codecoupler-pro/app-pwa";

await this.getStage("stage-id").load({
  component: Vue,
  options: {
    vue: PWAVue,
    props: {
      pwa: new PWA(),
      /* optional additional props */
    }
  }
});

Use it as Vue component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <PWAVue :pwa="pwa"></PWAVue>
</template>
<script>
import { PWAVue } from "@codecoupler-pro/app-pwa-vue";
import { PWA } from "@codecoupler-pro/app-pwa";

export default {
  components: { PWAVue },
  data: function() {
    return {
      pwa: new PWA();
    }
  },
}
</script>

Icons

All standard icons are defined as SVG. They have no background, width and height are set to 1em and all shapes use the current text color (fill or stroke attributes are set to "currentColor"). For custom SVG icons, it is recommended that you follow this principle as well.

You can override the default icons using the property iconsComponent. Create a Vue file with multiple svg icons and tag them with v-if like shown below. Place them all in one span element. Define then one prop icon:

icons-component-custom.vue
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<template>
  <span>
    <svg v-if="icon === '{identifier}'"><!-- svg data --></svg>
    <svg v-if="icon === '{identifier}'"><!-- svg data --></svg>
    <svg v-if="icon === '{identifier}'"><!-- svg data --></svg>
  </span>
</template>
<script setup>
defineProps({ icon: { type: String, default: "" } });
</script>

Import this file and use this as prop:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import iconsComponentCustom from "icons-component-custom.vue"
import { PWAVue } from "@codecoupler-pro/app-pwa-vue";
import { PWA } from "@codecoupler-pro/app-pwa";
import { createApp } from "vue";

let vueApp = createApp(PWAVue, {
  pwa: new PWA(),
  iconsComponent: iconsComponentCustom
});
vueApp.mount(element);

The following identifiers can be used:

  • mobile
  • desktop

Styling

CSS Classes

The internal HTML structure can be accessed as follows:

1
2
3
& span.icon {
  & svg {}
}

You can select a specific icon by adding the identifier: "& span.icon.identifier {}". Possible identifiers can be found in the above section.

1
2
3
& span.icon.identifier {
  & svg {}
}

Reference

The following props can be passed:

pwa: Object

PWA module instance.

iconsComponent: Vue

Overrides the default icons. See above.

showIconMobile: boolean and showIconDesktop: boolean

Handling the installation prompt works only in chromium based browsers. To show the icons in other bowsers (without any additional functionality) you can set these props to true.

showIcons: Object

To show the icons regardless of the current status you can pass the identifier as properties and the value true to this object. Example: { identifier1: true }.