1. Create a new project using @vue/cli (Vue3)
2. Add as Quasar a plug in ( https://quasar.dev/start/vue-cli-plugin) - Enable Quasar tree-shaking (recommended)
3. Configure Vue 3 to generate multiple pages using multi page mode https://cli.vuejs.org/config/#pages
   • This will generate a separate HTML page that references generated tree-shaken JS files for each entry point.

I’ve already created and tested (but not published) Quasar components for text to speech and voice selection. Might combine our efforts if you’re interested.

Was an old app and turned out that I just needed to upgrade Quasar.

Looking at the code for the Notify plugin I can see that it’s generating QBtn’s and appears to accept any QBtn prop for any notify action that you can set either via attrs or ...props . However I can’t seem to make either work. Specifically I’d like to set the background color for an action button.

• https://github.com/quasarframework/quasar/blob/e42dc072140ff266790065d498c28d30d5a40dae/ui/src/plugins/Notify.js#L169

     this.$q.notify({
        message: "some message,
        color: "white",
        textColor: "primary",
        avatar: this.logo,
        rounded: true,
        multiLine: true,
        timeout: 0,
        actions: [
          {
            label: "OK",
            style: "background: primary; color: white"
          }
        ]
      });

Another option might be to embed the sounds as base64 encoded data URI’s. This solution may not be what you need for large audio files or many audio file but ok for short audio like click / alarm sounds.

• See https://jsfiddle.net/zw7qnrgm/53/

I think this webpack loader plugin would base64 encode your audio file and add the audio mime type as in the jsfiddle example

• https://webpack.js.org/loaders/url-loader/

See https://quasar.dev/quasar-cli/handling-webpack for details on how to add webpack plugins to Quasar.

Just noticed this announcement that may be of interest to PWA development as it mentioned a few new features.

https://www.thurrott.com/dev/237715/microsoft-worked-with-google-to-bring-pwas-to-the-play-store

Thanks Allen. More excellent Quasar grade docs for BEX. Well done.

This might also be useful … https://github.com/theomessin/vue-chat-scroll

1. Create a new project using @vue/cli (Vue3)
2. Add as Quasar a plug in ( https://quasar.dev/start/vue-cli-plugin) - Enable Quasar tree-shaking (recommended)
3. Configure Vue 3 to generate multiple pages using multi page mode https://cli.vuejs.org/config/#pages
   • This will generate a separate HTML page that references generated tree-shaken JS files for each entry point.

Looking forward to this. Typescript is now critical for acceptance in many commercial/govt contexts.

Very nice … I think this belongs on the main Quasar site or Quasar Awsome

I’ve already created and tested (but not published) Quasar components for text to speech and voice selection. Might combine our efforts if you’re interested.