# React and Vue

> Using @82label/core from React and Vue.

Source: https://82label.app/en/docs/frameworks/

`print()` is a plain function: call it from any framework. Dedicated React and Vue packages are coming; the core is enough, as below.

## React

```js
import { useState } from 'react';
import { print } from '@82label/core';
import template from './labels/product.json';

export function PrintLabelButton({ items }) {
  const [busy, setBusy] = useState(false);
  const onClick = async () => {
    setBusy(true);
    try {
      const rows = items.map((it) => ({ name: it.name, price: it.price, sku: it.sku }));
      const r = await print(template, rows);
      if (r.status === 'pending_permission') alert('Allow this site in the print agent.');
    } finally {
      setBusy(false);
    }
  };
  return <button onClick={onClick} disabled={busy}>Print labels</button>;
}
```

## Preview (React)

```js
import { renderToSVG } from '@82label/core';

export function LabelPreview({ template, row }) {
  // renderToSVG escapes every value, so the markup is safe to insert
  return <div dangerouslySetInnerHTML={{ __html: renderToSVG(template, row) }} />;
}
```

## Vue

```vue
<script setup>
import { ref } from 'vue';
import { print } from '@82label/core';
import template from './labels/product.json';

const props = defineProps({ items: Array });
const busy = ref(false);

async function onPrint() {
  busy.value = true;
  try {
    await print(template, props.items.map((it) => ({ name: it.name, price: it.price, sku: it.sku })));
  } finally {
    busy.value = false;
  }
}
</script>

<template>
  <button :disabled="busy" @click="onPrint">Print labels</button>
</template>
```

## As a web component

`<label-82>` is a standard custom element, so React 19 and Vue 3 can use the tag directly. In Vue, add `label-82` to `compilerOptions.isCustomElement`.

```js
import { defineLabelElement } from '@82label/core';
import '@82label/core/styles.css';
defineLabelElement();

// React 19
<label-82 template="lbl_a1b2c3d4e5" data={JSON.stringify(rows)} button="Print" />
```

> With SSR (Next.js, Nuxt) call `print()` only from browser events. `renderToSVG` works on the server too.