### Install vue-to-print

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/guide/get-started.md

Install the vue-to-print package using npm, pnpm, or yarn. This is the first step to integrate the library into your project.

```shell
$ npm install vue-to-print --save
```

```shell
$ pnpm add vue-to-print
```

```shell
$ yarn add vue-to-print
```

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

### Use vue-to-print with Composition API

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/guide/get-started.md

Demonstrates how to use the `useVueToPrint` hook from the vue-to-print library. It requires a `ref` pointing to the content to be printed and provides a `handlePrint` function to trigger the print action.

```vue
<script setup lang="ts">
import { useVueToPrint } from "vue-to-print";
import { ref } from "vue";

const componentRef = ref();
const { handlePrint } = useVueToPrint({
  content: componentRef,
  documentTitle: "AwesomeFileName",
});
</script>

<template>
  <button @click="handlePrint">Print</button>
  <div ref="componentRef">
    <h1>Hello, world!</h1>
  </div>
</template>
```

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

### Use useData() API in VitePress

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/api-examples.md

Demonstrates how to import and use the `useData()` hook from VitePress to access site, theme, and page data within a Vue component. It shows how to destructure the returned object to get theme, page, and frontmatter information.

```vue
<script setup>
import { useData } from 'vitepress'

const { site, theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data

<pre>{{ theme }}</pre>

### Page Data

<pre>{{ page }}</pre>

### Page Frontmatter

<pre>{{ frontmatter }}</pre>
```

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

### Print by Hook

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/zh/guide/basic-usage.md

Demonstrates printing using the recommended hook method. This example includes the main hook component and the component intended for printing.

```vue
<<< @/examples/PrintByHook.vue{vue}
```

```vue
<<< @/examples/ComponentToPrint.vue{vue} [printed component]
```

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

### Print by Component

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/zh/guide/basic-usage.md

Shows how to print using a component-based approach. This example includes the main component and the component intended for printing.

```vue
<<< @/examples/PrintByComponent.vue{vue}
```

```vue
<<< @/examples/ComponentToPrint.vue{vue} [printed component]
```

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

### Vue: Print with Hook

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/guide/basic-usage.md

Demonstrates printing content in a Vue.js application using a hook-based approach. This method is recommended for its flexibility and ease of use. It typically involves importing and using a printing hook within your component's script setup.

```vue
<<< @/examples/PrintByHook.vue
```

```vue
<<< @/examples/ComponentToPrint.vue [printed component]
```

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

### Basic Vue Component Printing

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/guide/api.md

Demonstrates the fundamental usage of the `useVueToPrint` hook within a Vue 3 setup script. It shows how to import the hook, reference the DOM element to be printed using `ref`, and trigger the print action via a button click.

```Vue
<script setup lang="ts">
import { useVueToPrint } from "vue-to-print";
import { ref } from "vue";

const componentRef = ref();
const { handlePrint } = useVueToPrint({ content: componentRef });
</script>

<template>
  <button @click="handlePrint">Print</button>
  <div ref="componentRef">
    <h1>Hello, world!</h1>
  </div>
</template>
```

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

### Vue: Print Web Components with Hook

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/guide/basic-usage.md

Shows how to print Web Components within a Vue.js application, specifically integrating with the Ionic framework. This example utilizes a hook to manage the printing of components that leverage Shadow DOM.

```vue
<<< @/examples/shadow-dom/PrintShadowDomByHook.vue
```

```vue
<<< @/examples/shadow-dom/ShadowDomToPrint.vue [printed component]
```

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

### useVueToPrint Hook Example

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/zh/guide/api.md

Demonstrates how to use the useVueToPrint composable hook to trigger printing of a specific DOM element. It requires importing the hook and a ref to the content element.

```vue
<script setup lang="ts">
import { useVueToPrint } from "vue-to-print";
import { ref } from "vue";

const componentRef = ref();
const { handlePrint } = useVueToPrint({ content: componentRef });
</script>

<template>
  <button @click="handlePrint">打印</button>
  <div ref="componentRef">
    <h1>Hello, world!</h1>
  </div>
</template>
```

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

### Vue: Print with Component

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/guide/basic-usage.md

Illustrates how to print content in a Vue.js application by using a dedicated printing component. This approach encapsulates the printing logic within a reusable component, making it straightforward to integrate into your application.

```vue
<<< @/examples/PrintByComponent.vue
```

```vue
<<< @/examples/ComponentToPrint.vue [printed component]
```

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

### Print Web Components with Hook

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/zh/guide/basic-usage.md

An example of printing Web Components, specifically from Ionic, using a hook. This includes the hook component and the shadow DOM component to be printed.

```vue
<<< @/examples/shadow-dom/PrintShadowDomByHook.vue{vue}
```

```vue
<<< @/examples/shadow-dom/ShadowDomToPrint.vue{vue} [printed component]
```

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

### useVueToPrint Hook API

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/guide/api.md

Provides the detailed type definitions for the `useVueToPrint` hook and its associated props. This documentation outlines all available options for customizing the printing process, including content selection, style copying, document titles, and callback functions.

```APIDOC
useVueToPrint(options: PublicUseVueToPrintProps): { handlePrint: () => void }
  - Hook for initiating print functionality in Vue.js components.
  - Parameters:
    - options: An object containing configuration for the print process.
      - type: PublicUseVueToPrintProps

PublicUseVueToPrintProps
  - Extends UseVueToPrintProps, making most properties optional except for 'content'.
  - type: Partial<Omit<UseVueToPrintProps, "content">> & Pick<UseVueToPrintProps, "content">

UseVueToPrintProps
  - Defines all configurable properties for the printing hook.
  - Properties:
    - bodyClass: CSS class to apply to the document body during printing.
      - type: MaybeRefOrGetter<string>
    - content: The DOM element or Vue component instance to print. This is a required property.
      - type: MaybeRefOrGetter<HTMLElement | ComponentPublicInstance>
    - copyStyles: Whether to copy styles from the document's head.
      - type: MaybeRefOrGetter<boolean>
    - documentTitle: The title to set for the printed document.
      - type: MaybeRefOrGetter<string>
    - fonts: An array of font objects to include in the print.
      - type: MaybeRefOrGetter<Font[]>
    - onAfterPrint: Callback function executed after the print job is completed.
      - type: MaybeRefOrGetter<() => void>
    - onBeforeGetContent: Callback function executed before fetching content for printing.
      - type: MaybeRefOrGetter<() => void | Promise<void>>
    - onBeforePrint: Callback function executed before the print dialog is shown.
      - type: MaybeRefOrGetter<() => void | Promise<void>>
    - onPrintError: Callback function for handling errors during the print process.
      - type: MaybeRefOrGetter<(errorLocation: "onBeforeGetContent" | "onBeforePrint" | "print", error: Error) => void>
    - pageStyle: Custom CSS styles to apply to the print page.
      - type: MaybeRefOrGetter<string | PropertyFunction<string>>
    - print: Custom function to handle the actual printing logic.
      - type: MaybeRefOrGetter<(target: HTMLIFrameElement) => Promise<void>>
    - removeAfterPrint: Whether to remove the printed content from the DOM after printing.
      - type: MaybeRefOrGetter<boolean>
    - suppressErrors: Whether to suppress errors during the printing process.
      - type: MaybeRefOrGetter<boolean>
    - nonce: A nonce value for script execution in the print iframe.
      - type: MaybeRefOrGetter<string>

Return Value:
  - handlePrint: A function that, when called, initiates the printing process.
```

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

### VueToPrint Component Options and Slots

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/zh/guide/api.md

Details the configurable options and slots available for the VueToPrint component. These props control printing behavior like error suppression, nonce for CSP, and styling.

```APIDOC
VueToPrint Component Options:

- `removeAfterPrint?`: `boolean`
  - Description: Deletes the print iframe after execution. Defaults to `false`.

- `suppressErrors?`: `boolean`
  - Description: Prevents `console` from logging errors when passed.

- `nonce?`: `string`
  - Description: Sets the nonce attribute for CSP (Content Security Policy) to whitelist script and style elements.

Slots:

- `default`: `v-slot="{ handlePrint: () => void }"`
  - Description: Returns a function that triggers the print dialog. The `handlePrint` function is exposed.

- `trigger?`: `v-slot:trigger`
  - Description: Returns a function that triggers the print dialog. Note: The custom `onClick` attribute is injected into the returned component/element. Avoid providing an `onClick` attribute to the root node returned by `trigger` as it will be overwritten.
```

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

### useVueToPrint Hook API

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/zh/guide/api.md

Provides the TypeScript type definitions for the useVueToPrint hook, detailing its options and return type. The 'content' option is mandatory.

```typescript
declare function useVueToPrint(
  options: PublicUseVueToPrintProps
): { handlePrint: () => void };

// content 参数是必须的，其他参数是可选的
declare type PublicUseVueToPrintProps = 
  Partial<Omit<UseVueToPrintProps, "content">>
  & Pick<UseVueToPrintProps, "content">;

// 参数说明见上方 VueToPrint Component 参数说明
export interface UseVueToPrintProps {
    bodyClass: MaybeRefOrGetter<string>;
    content: MaybeRefOrGetter<HTMLElement | ComponentPublicInstance>;
    copyStyles: MaybeRefOrGetter<boolean>;
    documentTitle: MaybeRefOrGetter<string>;
    fonts: MaybeRefOrGetter<Font[]>;
    onAfterPrint: MaybeRefOrGetter<() => void>;
    onBeforeGetContent: MaybeRefOrGetter<() => void | Promise<void>>;
    onBeforePrint: MaybeRefOrGetter<() => void | Promise<void>>;
    onPrintError: MaybeRefOrGetter<(
    errorLocation: "onBeforeGetContent" | "onBeforePrint" | "print",
    error: Error
    ) => void>;
    pageStyle: MaybeRefOrGetter<string | PropertyFunction<string>>;
    print: MaybeRefOrGetter<(target: HTMLIFrameElement) => Promise<void>>;
    removeAfterPrint: MaybeRefOrGetter<boolean>;
    suppressErrors: MaybeRefOrGetter<boolean>;
    nonce: MaybeRefOrGetter<string>;
}
```

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

### VueToPrint Component Props

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/guide/api.md

Configuration options for the Vue-to-Print component to control printing behavior. These props allow customization of callbacks, styling, and print methods.

```APIDOC
VueToPrint Component Props:

  onBeforePrint? (function): Callback function that triggers before print. It runs immediately prior to printing, but after content gathering. Can return void or a Promise. Use onBeforeGetContent to modify content before printing.

  onPrintError? (function): Callback function called on printing errors. Signature: `function(errorLocation: 'onBeforePrint' | 'onBeforeGetContent' | 'print', error: Error)`. Useful for retrying prints, especially for Promise rejections in other callbacks.

  pageStyle? (string | function): Allows overriding default print styles. If a function, it must return a string representing the CSS.

  print? (function): Custom function to replace `window.print`. Receives the internal `HTMLIFrameElement` and must return a Promise when printing is complete. Useful for non-browser environments like Electron.

  removeAfterPrint? (boolean): Determines if the internal print iframe should be removed after the print action. Defaults to `false`.

  suppressErrors? (boolean): If true, prevents console logging of errors.

  nonce? (string): Sets the nonce attribute for script and style elements to comply with Content Security Policy (CSP).
```

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

### VueToPrint Component Slots

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/guide/api.md

Defines the slots available for customizing the Vue-to-Print component's content and trigger.

```APIDOC
VueToPrint Component Slots:

  default: Slot for providing the main content to be printed. It exposes a `handlePrint` function `v-slot="{ handlePrint: () => void }"` which triggers the print dialog.

  trigger?: Slot for providing a custom trigger element. Note: A custom `onClick` prop is injected into the returned Component/Element. Do not provide an `onClick` prop to the root node returned by this slot, as it will be overwritten.
```

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

### Vue-to-Print Component Props

Source: https://github.com/siaikin/vue-to-print/blob/master/docs/guide/api.md

Defines the properties that can be passed to the vue-to-print component to control its printing behavior. This includes specifying the content to print, styling options, and callback functions for lifecycle events.

```APIDOC
VueToPrintComponent:
  Props:

  content:
    Type: HTMLElement | ComponentPublicInstance
    Description: The DOM element or component instance to be printed.
    Required: Yes

  bodyClass?:
    Type: string
    Description: One or more class names to apply to the print window's body, separated by spaces.
    Optional: Yes

  copyStyles?:
    Type: boolean
    Description: If true, copies all `<style>` and `<link rel="stylesheet" />` tags from the parent window's `<head>` into the print window. Defaults to `true`.
    Optional: Yes
    Default: true

  documentTitle?:
    Type: string
    Description: Sets the title for the print job, which is often used when saving the content as a file.
    Optional: Yes

  fonts?:
    Type: Array<{ family: string; source: string; weight?: string; style?: string; }>
    Description: An optional list of fonts to be loaded into the printing iframe. Useful for custom fonts.
    Optional: Yes

  onAfterPrint?:
    Type: function
    Description: A callback function that is executed after the print dialog is closed, regardless of whether the user chose to print or cancel.
    Optional: Yes

  onBeforeGetContent?:
    Type: function
    Description: A callback function that triggers before the library collects the page's content. It can return void or a Promise and is useful for modifying content before printing.
    Optional: Yes
```

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