@scanupload/qr-code-generator-vue

@scanupload/qr-code-generator-vue

Vue 3 component wrapper for the ScanUpload QR Code Generator. Renders a QR code, manages the live upload session over SignalR, and shows uploaded-file previews.

Install

npm install @scanupload/qr-code-generator-vue

Peer dependency: vue >= 3.4.

Quick start

<script setup lang="ts">
import { QrCodeGenerator } from "@scanupload/qr-code-generator-vue";
import "@scanupload/qr-code-generator-vue/dist/index.css";
</script>

<template>
  <QrCodeGenerator
    session-url="/api/front-end/session"
    client-id="your-client-id"
    header="Upload files from your phone"
    :show-header="true"
    :show-download-button="true"
  />
</template>

Get a client ID

The client-id prop identifies your tenant. Create it in the ScanUpload Dashboard:

1. Log in or sign up to the ScanUpload Dashboard.
2. Enter your company name and website URL, then click Save.
3. Navigate to the Client Credentials section to generate your client ID.

The client secret is only used by server-side integrations — leave it out of any client-side env file. The browser only needs the client ID.

Props

Props use kebab-case in templates (e.g. session-url, show-header).

sessionUrl is reactive — changing it at runtime updates the live session via the core setOptions API.

Downloads

Set showDownloadButton to render a "Download all files" button beneath the previews. It fetches every UploadedFile.url the hub has surfaced and saves each file, showing an error toast if any fail.

DownloadButton is exported separately if you want it on its own:

<script setup lang="ts">
import {
  DownloadButton,
  useQrCodeCore,
} from "@scanupload/qr-code-generator-vue";

const { core } = useQrCodeCore({ sessionUrl: "/api/front-end/session" });
</script>

<template>
  <DownloadButton :core="core" />
</template>

Handling files elsewhere

Set :show-file-previews="false" and use the lifecycle callbacks when something else renders the files — an uploader, your own list, or analytics:

<QrCodeGenerator
  :session-url="sessionUrl"
  :show-file-previews="false"
  :on-file-available="(file, origin) => add(file)"
  :on-file-removed="(file) => drop(file.id)"
  :on-files-cleared="() => dropAll()"
/>

Events are not replayed, so a file that arrived before the widget mounted will not fire onFileAvailable. For a guaranteed one-shot pass over the session — or to feed an uploader with no bespoke adapter — use connectScanUploadFiles from @scanupload/qr-code-generator-core.

Styling

The package ships dist/index.css. Import your overrides after it so same-specificity rules win via cascade.

import "@scanupload/qr-code-generator-vue/dist/index.css";
import "./my-overrides.css";

See the root README for the full list of --sqg-* tokens.

Other exports

• useQrCodeCore — composable returning { state, core, retrySession, setOptions }
• usePersistentState — read/write helpers backed by the configured StorageAdapter
• DownloadButton — the button showDownloadButton renders

License

MIT © Donald Asante