@freereportjs/vue

@freereportjs/vue

Vue 3 components for FreeReport: the report viewer and the banded report designer.

npm i @freereportjs/core @freereportjs/vue

<script setup>
import { FreeReportDesigner, FreeReportViewer } from '@freereportjs/vue';
import '@freereportjs/core/styles.css';
</script>

<template>
  <FreeReportViewer ref="viewer" :definition="def" :data="{ rows }" lang="en" :height="720" />
  <FreeReportDesigner v-model:definition="def" :data="{ rows }" @save="save" />
</template>

The viewer takes every viewer option as a prop and every event as a listener (form, mode, :form-values, @form-change, @submit → onSubmit, unmask, panel, pdfa, xlsx-template, zpl, direct-print, locale, collapsed-groups, sort, …); attributes it does not declare are passed on as viewer options too. definition, data, params, zoom and formValues update it in place, compared by value (inline objects do not re-run it); other props recreate it. The viewer exposes viewer, report, getFormData(), setFormData() and validateForm(), the designer designer. The designer emits change / update:definition after edits and save. Both default to height: 100% with a 480px minimum (height / min-height props). Docs: https://freereport.app/docs/

License

Free for personal use. Company use needs a domain license: KRW 500,000 per domain per year, or KRW 900,000 once (perpetual) (VAT separate). See https://freereport.app/pricing/ and the LICENSE file.

개인은 무료, 회사는 도메인당 연 50만 원 또는 영구 90만 원(부가세 별도)입니다. 자세한 내용은 https://freereport.app/pricing/

import { setLicenseKey } from '@freereportjs/core';
setLicenseKey('FR1....');   // or the licenseKey prop