@reportwright/vue

@reportwright/vue

The ReportWright report viewer and drag-and-drop designer as Vue 3 components.

Live demo: mrarun005.github.io/reportwright-demo (Embed it shows the wrapper code; the designer playground is the designer this package mounts).

Vue is a peer dependency; the viewer loads on mount (SSR-safe).

Install

npm i @reportwright/vue @reportwright/viewer @reportwright/fonts
cp -r node_modules/@reportwright/fonts/public public/pw     # serve the fonts as static files

Vite 7: set worker: { format: 'es' } in vite.config.js (see @reportwright/viewer's bundler setup).

Quick start (30 seconds)

<script setup>
import { ReportWrightViewer } from '@reportwright/vue';
import definition from './orders.pw.json';   // the report from @reportwright/engine's README examples
const orders = { rows: [{ customer: 'Asha Rao', amount: 1200.5 }, { customer: 'Ben Ode', amount: 80 }] };
</script>
<template>
  <ReportWrightViewer :options="{ definition, data: { orders }, fontsUrl: '/pw/fonts/', height: '720px' }" />
</template>

Verified against this version with Vite 7 and Vue 3.5 in Chromium.

Examples

Get the handle, re-run with parameters, export:

<script setup>
import { ReportWrightViewer } from '@reportwright/vue';
let viewer;
const onReady = (h) => { viewer = h; h.on('ready', ({ pages }) => console.log(pages, 'pages')); };
const excel = async () => open(URL.createObjectURL(await viewer.export('xlsx')));
</script>
<template>
  <button @click="viewer.setParameters({ minAmount: 100 })">Over 100</button>
  <button @click="excel">Excel</button>
  <ReportWrightViewer :options="{ definition, data: { orders }, fontsUrl: '/pw/fonts/' }" @ready="onReady" />
</template>

Edit a report and save it to your own API:

<ReportWrightDesigner :options="{ definition, fontsUrl: '/pw/fonts/', onSave: (def) => api.put('/reports/orders', def) }" />

With a self-hosted ReportWright server:

<ReportWrightViewer :options="{ server: 'https://reports.example.com', report: 'invoice', params: { id: '42' } }" />
<ReportWrightDesigner :options="{ server, definition, onSave: save }" @ready="(h) => (designer = h)" />

A runnable app is in the repository's examples/vue.

Props and events

	Component	Meaning
options prop	both	the options of mountViewer / mountDesigner (full table in @reportwright/viewer)
@ready	both	the ViewerHandle / DesignerHandle
@error	both	the viewer's code did not load (the element shows the message)

Support

Vue 3.3 or later (peer). Browsers and limits are the viewer's: see @reportwright/viewer.

No server needed: pass definition, data (JSON by data source name) and fontsUrl (a copy of @reportwright/fonts/public/fonts). server (the self-hosted ReportWright server) is optional: see what works standalone.

Related packages

@reportwright/viewer (what this wraps), @reportwright/engine, @reportwright/fonts, and the react, svelte and angular wrappers.

MIT.