### Install vue-pdf with bun

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/docs/intro/getting-started.md

Install the vue-pdf package as a development dependency using bun.

```sh
$ bun add -D @ceereals/vue-pdf
```

--------------------------------

### Install vue-pdf with yarn

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/docs/intro/getting-started.md

Install the vue-pdf package as a development dependency using yarn.

```sh
$ yarn add -D @ceereals/vue-pdf
```

--------------------------------

### Install Vue PDF

Source: https://github.com/ceereals/vue-pdf/blob/main/README.md

Install the Vue PDF package using npm. This is the first step before using the library.

```bash
npm install @ceereals/vue-pdf
```

--------------------------------

### Install vue-pdf with pnpm

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/docs/intro/getting-started.md

Install the vue-pdf package as a development dependency using pnpm.

```sh
$ pnpm add -D @ceereals/vue-pdf
```

--------------------------------

### Install vue-pdf with npm

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/docs/intro/getting-started.md

Install the vue-pdf package as a development dependency using npm.

```sh
$ npm add -D @ceereals/vue-pdf
```

--------------------------------

### Vue PDF Web Usage

Source: https://github.com/ceereals/vue-pdf/blob/main/README.md

Example of using Vue PDF in a web browser. It demonstrates rendering a simple PDF document with text.

```html
<script setup>
import { Document, Page, Text, View, PDFViewer } from "@ceereals/vue-pdf";
import { reactive } from "vue";
const viewStyle = reactive({
  flexDirection: "row",
  justifyContent: "center",
  alignItems: "center",
  height: "100%",
});

const textStyle = reactive({
  fontSize: 24,
});
</script>
<template>
  <PDFViewer>
    <Document>
      <Page size="A4">
        <View :style="viewStyle">
          <Text :style="textStyle">Hello, Vue PDF!</Text>
        </View>
      </Page>
    </Document>
  </PDFViewer>
</template>
```

--------------------------------

### Vue PDFPrint Component Example

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/browser-api.md

Create a print link for client-side generated documents with the PDFPrint component. Customize the button's label using the #label slot.

```vue
<script setup>
import { PDFPrint, Document, ... } from '@ceereals/vue-pdf'
</script>
<template>
  <PDFPrint>
    <template #label> Print Now! </template>
    <Document> ... </Document>
  </PDFPrint>
</template>
```

--------------------------------

### Vue PDFDownloadLink Component Example

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/browser-api.md

Implement a download link for client-side generated documents using the PDFDownloadLink component. Customize the download file name and the link's label using slots.

```vue
<script setup>
import { PDFDownloadLink, Document, ... } from '@ceereals/vue-pdf'
</script>
<template>
  <PDFDownloadLink document="Hello world" fileName="somename.pdf">
    <template #label> Download Now! </template>
    <Document> ... </Document>
  </PDFDownloadLink>
</template>
```

--------------------------------

### Vue PDF Node.js Usage

Source: https://github.com/ceereals/vue-pdf/blob/main/README.md

Example of using Vue PDF on the server-side with Node.js. It renders a PDF document to a file.

```javascript
import { Document, Page, Text, View, renderToFile } from "@ceereals/vue-pdf";
import { defineComponent, h } from "@vue/runtime-core";
import fs from "fs";

const DocumentTemplate = defineComponent(() => {
    return () => (
      h(Document, [
        h(Page, { size: "A4" }, [
          h(
            View, { style: viewStyle },
            [
              h(
                Text, { style: textStyle },
                "Hello, Vue PDF!",
              ),
            ],
          ),
        ]),
      ])
    )
})

const stream = renderToFile(DocumentTemplate,'document.pdf');
```

--------------------------------

### Vue PDFViewer Component Example

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/browser-api.md

Use the PDFViewer component to embed an iframe PDF viewer for client-side generated documents. Configure viewer options via query parameters and disable the provide bridge if needed.

```vue
<script setup>
import { PDFViewer, Document, ... } from '@ceereals/vue-pdf'
</script>
<template>
  <PDFViewer :queryParams="{ toolbar: 1 }" :enableProvideBridge="false">
    <Document> ... </Document>
  </PDFViewer>
</template>
```

--------------------------------

### Create a basic PDF document in Vue

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/docs/intro/getting-started.md

Define a simple PDF document structure using vue-pdf components. Ensure the Document component is the root and only contains Page components.

```vue
<script setup>
import { Document, Page, Text, View } from "@ceereals/vue-pdf";
import { reactive } from "vue";
const viewStyle = reactive({
  flexDirection: "row",
  justifyContent: "center",
  alignItems: "center",
  height: "100%",
});

const textStyle = reactive({
  fontSize: 24,
});
</script>
<template>
  <Document>
    <Page size="A4">
      <View :style="viewStyle">
        <Text :style="textStyle">Hello, Vue PDF!</Text>
      </View>
    </Page>
  </Document>
</template>
```

```ts
import { Document, Page, Text, View } from "@ceereals/vue-pdf";
import { defineComponent, h, reactive } from "vue";

export default defineComponent(() => {
  const viewStyle = reactive({
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
  });

  const textStyle = reactive({
    fontSize: 24,
  });
  return () =>
    h(Document, [
      h(Page, { size: "A4" }, [
        h(
          View,
          {
            style: viewStyle,
          },
          [
            h(
              Text,
              {
                style: textStyle,
              },
              "Hello, Vue PDF!",
            ),
          ],
        ),
      ]),
    ]);
});
```

```tsx
import { Document, Page, Text, View } from "@ceereals/vue-pdf";
import { defineComponent, reactive } from "vue";

export default defineComponent(() => {
  const viewStyle = reactive({
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
  });

  const textStyle = reactive({
    fontSize: 24,
  });
  return () => (
    <Document>
      <Page size="A4">
        <View style={viewStyle}>
          <Text style={textStyle}>Hello, Vue PDF!</Text>
        </View>
      </Page>
    </Document>
  );
});
```

--------------------------------

### Render PDF to File with Node.js

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/docs/intro/getting-started.md

Utilize the `renderToFile` function in Node.js to generate a PDF file. This function returns a Promise that resolves to a readable stream once the file is written.

```javascript
import { renderToFile } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.ts";


await renderToFile(HelloWorldDocument, "hello-world.pdf");

```

```javascript
import { h } from "vue";
import { renderToFile } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.ts";


await renderToFile(h(HelloWorldDocument, /** props */), "hello-world.pdf");

```

--------------------------------

### renderToFile

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/node-api.md

Renders a Vue PDF document to a specified file path.

```APIDOC
## `renderToFile`

### Description
Renders a Vue PDF document to a specified file path.

### Method
`renderToFile(document: Component, outputPath: string, options?: RenderOptions)`

### Parameters
- **document** (Component) - Required - The Vue component representing the PDF document.
- **outputPath** (string) - Required - The path where the PDF file will be saved.
- **options** (RenderOptions) - Optional - Additional rendering options.

### Request Example
```ts
import { renderToFile } from '@ceereals/vue-pdf/node'
import HelloWorldDocument from './HelloWorldDocument.ts'

await renderToFile(HelloWorldDocument, 'output.pdf')
```

### Request Example with Props
```ts
import { h } from 'vue'
import { renderToFile } from '@ceereals/vue-pdf/node'
import HelloWorldDocument from './HelloWorldDocument.ts'

await renderToFile(h(HelloWorldDocument, {/** props */}), 'output.pdf')
```
```

--------------------------------

### View Component

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

A fundamental component for building the UI, designed to be nested and can contain other views.

```APIDOC
## `<View>`

The most fundamental component for building a UI and is designed to be nested inside other views and can have 0 to many children.

- **Props**

<<< ../../src/components/index.ts#ViewProps
```

--------------------------------

### Using PDFSuspense for Async Content

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

Demonstrates how to use PDFSuspense to handle asynchronous content loading within a PDF document. The fallback slot displays 'Loading...' while the async content is being fetched.

```vue
<script setup lang="ts">
import { Document, Page, Text, PDFSuspense } from '@ceereals/vue-pdf'
import AsyncText from './AsyncText.vue'
</script>
<template>
  <Document>
    <Page>
      <PDFSuspense>
        <template #fallback>
          <Text>Loading...</Text>
        </template>
        <AsyncText />
      </PDFSuspense>
    </Page>
  </Document>
</template>
```

```vue
<script setup lang="ts">
import { Text } from '@ceereals/vue-pdf'
const text = ref(
  await new Promise((resolve) => setTimeout(() => resolve('Loaded!'), 1000))
)
</script>
<template>
  <Text>{{ text }}</Text>
</template>
```

--------------------------------

### usePdf Composable - Script Usage with Runtime Core

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/browser-api.md

Generate a PDF from a script using the usePdf composable and Vue's runtime core. This allows for PDF generation in environments where a full Vue app might not be present, such as Node.js.

```ts
import { h } from '@vue/runtime-core'
import { usePdf } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.vue'

const { url } = await usePdf(
  h(HelloWorldDocument, {
    /** props */
  })
)
```

--------------------------------

### Render PDF in Browser with usePdf

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/docs/intro/getting-started.md

Use the `usePdf` composable to render a PDF document directly in the browser. It accepts a Vue component or a render function. The generated URL can be used in an iframe.

```vue
<script setup>
import { h } from "vue";
import { usePdf } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.vue";

const { url } = usePdf(h(HelloWorldDocument, /* props */));
</script>
<template>
  <iframe :src="url"/>
</template>
```

```vue
<script setup>
import { usePdf } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.vue";

const { url } = usePdf(HelloWorldDocument);
</script>
<template>
  <iframe :src="url" />
</template>
```

--------------------------------

### <PDFDownloadLink>

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/browser-api.md

A component that renders a download link for client-side generated PDF documents. It supports custom labels via slots and emits events.

```APIDOC
## <PDFDownloadLink>

### Description
Download link for client-side generated documents.

### Props
Refer to the `PDFDownloadLinkProps` definition in `../../src/components/index.ts` for available props.

### Slots
Refer to the `PDFDownloadLinkSlots` definition in `../../src/components/index.ts` for available slots.

### Events
Refer to the `PDFDownloadLinkEvents` definition in `../../src/components/index.ts` for available events.

### Example
```vue
<script setup>
import { PDFDownloadLink, Document, ... } from '@ceereals/vue-pdf'
</script>
<template>
  <PDFDownloadLink document="Hello world" fileName="somename.pdf">
    <template #label> Download Now! </template>
    <Document> ... </Document>
  </PDFDownloadLink>
</template>
```
```

--------------------------------

### renderToBuffer

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/node-api.md

Renders a Vue PDF document to a buffer.

```APIDOC
## `renderToBuffer`

### Description
Renders a Vue PDF document directly into a Node.js Buffer.

### Method
`renderToBuffer(document: Component, options?: RenderOptions): Promise<Buffer>`

### Parameters
- **document** (Component) - Required - The Vue component representing the PDF document.
- **options** (RenderOptions) - Optional - Additional rendering options.

### Response
- **Buffer** - A Buffer containing the PDF data.

### Request Example
```ts
import { renderToBuffer } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.ts'
import fs from 'fs'

const buffer = await renderToBuffer(HelloWorldDocument)
fs.writeFileSync('output.pdf', buffer)
```

### Request Example with Props
```ts
import { h } from 'vue'
import { renderToBuffer } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.ts'
import fs from 'fs'

const buffer = await renderToBuffer(h(HelloWorldDocument, {/** props */}))
fs.writeFileSync('output.pdf', buffer)
```
```

--------------------------------

### renderToStream

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/node-api.md

Renders a Vue PDF document to a readable stream.

```APIDOC
## `renderToStream`

### Description
Renders a Vue PDF document to a readable stream, allowing for piping to other destinations.

### Method
`renderToStream(document: Component, options?: RenderOptions): Promise<ReadableStream>`

### Parameters
- **document** (Component) - Required - The Vue component representing the PDF document.
- **options** (RenderOptions) - Optional - Additional rendering options.

### Response
- **ReadableStream** - A readable stream of the generated PDF.

### Request Example
```ts
import { renderToStream } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.ts'
import fs from 'fs'

const stream = await renderToStream(HelloWorldDocument)
stream.pipe(fs.createWriteStream('output.pdf'))
```

### Request Example with Props
```ts
import { h } from 'vue'
import { renderToStream } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.ts'
import fs from 'fs'

const stream = await renderToStream(h(HelloWorldDocument, {/** props */}))
stream.pipe(fs.createWriteStream('output.pdf'))
```
```

--------------------------------

### Note Component

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

A Vue component for displaying note annotations within the PDF document.

```APIDOC
## `<Note>`

A Vue component for displaying a note annotation inside the document.

- **Props**

<<< ../../src/components/index.ts#NoteProps
```

--------------------------------

### usePdf Composable - Async PDF URL

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/browser-api.md

Fetch the PDF URL asynchronously using the usePdf composable. This is useful for directly linking to or displaying the generated PDF.

```vue
<script setup>
import { usePdf } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.vue'

const { url } = await usePdf(HelloWorldDocument)
</script>
<template>
  <a :href="url" download="output.pdf">Download PDF</a>
</template>
```

--------------------------------

### usePdf()

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/browser-api.md

A Vue composable function for generating PDF documents on the client-side. It can be used in Vue components or scripts.

```APIDOC
## usePdf()

### Description
Vue composable for generating PDF documents.

### Type
Refer to the `usePdf` type definition in `../../src/composables/usePdf.ts`.

### Example
::: code-group

```vue [MyComponent.vue]
<script setup>
import { usePdf } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.vue'
const { execute } = usePdf(HellowWorldDocument, { reactive: false })
</script>
<template>
  <button @click="() => execute(true)">Generate PDF</button>
</template>
```

```vue [MyAsyncComponent.vue]
<script setup>
import { usePdf } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.vue'

const { url } = await usePdf(HelloWorldDocument)
</script>
<template>
  <a :href="url" download="output.pdf">Download PDF</a>
</template>
```

```ts [MyScript.ts]
import { h } from '@vue/runtime-core'
import { usePdf } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.vue'

const { url } = await usePdf(
  h(HelloWorldDocument, {
    /** props */
  })
)
```

:::

> [!Note]
> You can also use `usePdf` in Node.js and use the Vue reactivity system without needing to create a Vue App.
```

--------------------------------

### Image Component

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

A Vue component for displaying JPG or PNG images from network, local sources (Node only), or base64 encoded strings.

```APIDOC
## `<Image>`

A Vue component for displaying network or local (Node only) JPG or PNG images, as well as base64 encoded image strings.

- **Props**

<<< ../../src/components/index.ts#ImageProps
```

--------------------------------

### <PDFPrint>

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/browser-api.md

A component that provides a print link for client-side generated PDF documents. It allows for custom labels through slots and emits events.

```APIDOC
## <PDFPrint>

### Description
Print link for client-side generated documents.

### Props
Refer to the `PDFPrintProps` definition in `../../src/components/index.ts` for available props.

### Slots
Refer to the `PDFPrintSlots` definition in `../../src/components/index.ts` for available slots.

### Events
Refer to the `PDFPrintEvents` definition in `../../src/components/index.ts` for available events.

### Example
```vue
<script setup>
import { PDFPrint, Document, ... } from '@ceereals/vue-pdf'
</script>
<template>
  <PDFPrint>
    <template #label> Print Now! </template>
    <Document> ... </Document>
  </PDFPrint>
</template>
```
```

--------------------------------

### usePdf Composable - Execute PDF Generation

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/browser-api.md

Use the usePdf composable in Vue components to generate PDF documents. The 'execute' function can be called to trigger the generation process, optionally with a reactive flag.

```vue
<script setup>
import { usePdf } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.vue'
const { execute } = usePdf(HellowWorldDocument, { reactive: false })
</script>
<template>
  <button @click="() => execute(true)">Generate PDF</button>
</template>
```

--------------------------------

### Render Vue Component to PDF Stream

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/node-api.md

Utilize `renderToStream` for generating PDF output as a stream, which can then be piped to a file or another stream destination. This is efficient for large documents or when processing needs to happen incrementally.

```typescript
import { renderToStream } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.ts'

const stream = await renderToStream(HelloWorldDocument)
stream.pipe(fs.createWriteStream('output.pdf'))
```

```typescript
import { h } from 'vue'
import 
import { renderToStream } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.ts'

const stream = await renderToStream(h(HelloWorldDocument, {/** props */}))
stream.pipe(fs.createWriteStream('output.pdf'))
```

--------------------------------

### <PDFViewer>

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/browser-api.md

An iframe PDF viewer component for client-side generated documents. It accepts props to customize its behavior and appearance.

```APIDOC
## <PDFViewer>

### Description
Iframe PDF viewer for client-side generated documents.

### Props
Refer to the `PDFViewerProps` definition in `../../src/components/index.ts` for available props.

### Example
```vue
<script setup>
import { PDFViewer, Document, ... } from '@ceereals/vue-pdf'
</script>
<template>
  <PDFViewer :queryParams="{ toolbar: 1 }" :enableProvideBridge="false">
    <Document> ... </Document>
  </PDFViewer>
</template>
```
```

--------------------------------

### Render Vue Component to PDF File

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/node-api.md

Use `renderToFile` to generate a PDF directly from a Vue component. This is suitable for saving the PDF to a specified file path.

```typescript
import { renderToFile } from '@ceereals/vue-pdf/node'
import HelloWorldDocument from './HelloWorldDocument.ts'

await renderToFile(HelloWorldDocument, 'output.pdf')
```

```typescript
import { h } from 'vue'
import { renderToFile } from '@ceereals/vue-pdf/node'
import HelloWorldDocument from './HelloWorldDocument.ts'

await renderToFile(h(HelloWorldDocument, {/** props */}), 'output.pdf')
```

```typescript
import { Document, Page, Text, View } from "@ceereals/vue-pdf";
import { defineComponent, h, reactive } from "vue";

export default defineComponent(() => {
  const viewStyle = reactive({
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
  });

  const textStyle = reactive({
    fontSize: 24,
  });
  return () =>
    h(Document, [
      h(Page, { size: "A4" }, [
        h(
          View,
          {
            style: viewStyle,
          },
          [
            h(
              Text,
              {
                style: textStyle,
              },
              "Hello, Vue PDF!",
            ),
          ],
        ),
      ]),
    ]);
});
```

--------------------------------

### Canvas Component

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

A Vue component for freely drawing any content directly onto the PDF page.

```APIDOC
## `<Canvas>`

A Vue component for freely drawing any content on the page.

- **Props**

<<< ../../src/components/index.ts#CanvasProps
```

--------------------------------

### Text Component

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

A Vue component for displaying text. Supports nesting of other Text or Link components for inline styling.

```APIDOC
## `<Text>`

A Vue component for displaying text. Text supports nesting of other Text or Link components to create inline styling.

- **Props**

<<< ../../src/components/index.ts#TextProps
```

--------------------------------

### Render Vue Component to PDF Buffer

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/node-api.md

Employ `renderToBuffer` to obtain the PDF output as a Node.js Buffer. This is useful when you need to manipulate the PDF data in memory before saving or sending it.

```typescript
import { renderToBuffer } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.ts'

const buffer = await renderToBuffer(HelloWorldDocument)
fs.writeFileSync('output.pdf', buffer)
```

```typescript
import { h } from 'vue'
import { renderToBuffer } from '@ceereals/vue-pdf'
import HelloWorldDocument from './HelloWorldDocument.ts'

const buffer = await renderToBuffer(h(HelloWorldDocument, {/** props */}))
fs.writeFileSync('output.pdf', buffer)
```

--------------------------------

### SVG Components

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

Components for rendering SVG elements within the PDF document.

```APIDOC
## SVG

### `<Svg>`

- **Props**

<<< ../../src/components/index.ts#SvgProps

### `<SvgText>`

- **Props**

<<< ../../src/components/index.ts#SvgTextProps

### `<Tspan>`

The SVG `<Tspan />` element defines a subtext within a `<Text />` element or another `<Tspan />` element. It allows for adjustment of the style and/or position of that subtext as needed.

- **Props**

<<< ../../src/components/index.ts#TspanProps

### `<Path>`

- **Props**

<<< ../../src/components/index.ts#PathProps

### `<Rect>`

- **Props**

<<< ../../src/components/index.ts#RectProps

### `<Circle>`

- **Props**

<<< ../../src/components/index.ts#CircleProps

### `<Ellipse>`

- **Props**

<<< ../../src/components/index.ts#EllipseProps

### `<Line>`

- **Props**

<<< ../../src/components/index.ts#LineProps

### `<Polyline>`

- **Props**

<<< ../../src/components/index.ts#PolylineProps

### `<Polygon>`

- **Props**

<<< ../../src/components/index.ts#PolygonProps

### `<Stop>`

- **Props**

<<< ../../src/components/index.ts#StopProps

### `<Defs>`

No props

### `<G>`

- **Props**

<<< ../../src/components/index.ts#GProps

### `<LinearGradient>`

- **Props**

<<< ../../src/components/index.ts#LinearGradientProps

### `<RadialGradient>`

- **Props**

<<< ../../src/components/index.ts#RadialGradientProps
```

--------------------------------

### Document Component

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

The root component representing the PDF document. It must be the root of the component tree and can only contain Page components.

```APIDOC
## `<Document>`

This component represents the PDF document itself. It _must_ be the root of your tree element structure, and under no circumstances should it be used as child of another vue-pdf component. In addition, it should only have children of type `<Page />`.

- **Props**

<<< ../../src/components/index.ts#DocumentProps
```

--------------------------------

### Page Component

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

Represents a single page within the PDF document. It can be used multiple times within a Document component.

```APIDOC
## `<Page>`

Represents single page inside the PDF documents, or a subset of them if using the wrapping feature. A `<Document />` can contain as many pages as you want, but ensures not rendering a page inside any component besides Document.

- **Props**

<<< ../../src/components/index.ts#PageProps
```

--------------------------------

### Link Component

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

A Vue component for displaying hyperlinks. Can be nested within Text components or other valid primitives.

```APIDOC
## `<Link>`

A Vue component for displaying an hyperlink. Link’s can be nested inside a Text component, or being inside any other valid primitive.

- **Props**

<<< ../../src/components/index.ts#LinkProps
```

--------------------------------

### Render PDF in browser with PDFViewer

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/docs/intro/getting-started.md

Use the PDFViewer component to render a Vue PDF document in the browser. This component is web-only and renders the PDF in an iframe.

```vue
<script setup>
import { PDFViewer } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.vue";
</script>
<template>
  <PDFViewer>
    <HelloWorldDocument />
  </PDFViewer>
</template>
```

```vue
<script setup>
import { PDFViewer } from "@ceereals/vue-pdf";
import HelloWorldDocument from "./HelloWorldDocument.vue";
</script>
<template>
  <PDFViewer :queryParams="{ toolbar: 1, view: 'fit' }">
    <HelloWorldDocument />
  </PDFViewer>
</template>
```

--------------------------------

### Suspense Component

Source: https://github.com/ceereals/vue-pdf/blob/main/docs/reference/components-api.md

A component that allows for handling asynchronous operations, providing a fallback UI while content is loading. It mirrors the native Vue Suspense component.

```APIDOC
## `<Suspense>`

- **Props**

`PDFSuspense` has the same interface as the native Vue `<Suspense>` component, see [Vue Suspense documentation](https://vuejs.org/api/built-in-components.html#suspense).

- **Example**

:::code-group

```vue [MainDocument.vue]
<script setup lang="ts">
import { Document, Page, Text, PDFSuspense } from '@ceereals/vue-pdf'
import AsyncText from './AsyncText.vue'
</script>
<template>
  <Document>
    <Page>
      <PDFSuspense>
        <template #fallback>
          <Text>Loading...</Text>
        </template>
        <AsyncText />
      </PDFSuspense>
    </Page>
  </Document>
</template>
```

```vue [AsyncText.vue]
<script setup lang="ts">
import { Text } from '@ceereals/vue-pdf'
const text = ref(
  await new Promise((resolve) => setTimeout(() => resolve('Loaded!'), 1000))
)
</script>
<template>
  <Text>{{ text }}</Text>
</template>
```

:::
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.