### Install Vue Print Next via Package Manager

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Commands to install the library using common Node.js package managers.

```bash
npm install vue-print-next --save
# or
yarn add vue-print-next
# or
pnpm add vue-print-next
```

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

### Install Vue Print Next via Package Manager

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

Commands to add the vue-print-next dependency to your project using common JavaScript package managers.

```bash
npm install vue-print-next --save
yarn add vue-print-next
pnpm add vue-print-next
```

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

### Print Entire Page with Vue-Print-Next

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

This example demonstrates how to print the entire current web page using the v-print directive without any parameters.

```html
<button v-print>Print the entire page</button>
```

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

### Print Partial Content using Ref with Vue-Print-Next

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

This example demonstrates how to print a specific DOM element by obtaining a reference to it using Vue's `ref` and passing it to the VuePrintNext constructor. It requires importing `ref` and `VuePrintNext`.

```vue
<script setup lang="ts">
  import {ref, type Ref} from 'vue';
  import {VuePrintNext} from "vue-print-next";

  const printEle = ref(null) as Ref<HTMLElement>;
  
  function handlePrint() {
    new VuePrintNext({el: printEle.value})
  }
</script>

<template>
  <div ref="printEle">
    <p>This is the content to be printed</p>
  </div>

  <button @click="handlePrint">Print partial content</button>
</template>
```

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

### Print with Object Parameters using Vue-Print-Next

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

This example shows how to configure printing options by passing an object to the v-print directive. It includes parameters like `el`, `preview`, `extraCss`, `openCallback`, and `closeCallback`.

```vue
<template>
  <div>
    <div id="printMe">
      <p>This is the content to be printed</p>
    </div>
  </div>

  <button v-print="printObj">Print partial content</button>
</template>

<script setup>
  const printObj = {
    el: "#printMe",
    preview: true,
    extraCss: "https://cdn.example.com/extra.css",
    openCallback() {
      console.log('Print executed');
    },
    closeCallback() {
      console.log('Print tool closed');
    }
  }
</script>
```

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

### Utilize Complete Callback Lifecycle for Print Events (Vue)

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

This example demonstrates how to use all available lifecycle callbacks provided by VuePrintNext. These callbacks allow you to hook into various stages of the print process, such as before and after the preview iframe loads, before the print dialog opens, when it opens, and when it closes.

```vue
<template>
  <div>
    <button @click="printWithCallbacks">Print with Full Callbacks</button>
    <div id="callbackDemo">
      <h2>Callback Demo</h2>
      <p>Watch the console for callback events.</p>
    </div>
  </div>
</template>

<script setup>
import { VuePrintNext } from 'vue-print-next';

function printWithCallbacks() {
  new VuePrintNext({
    el: '#callbackDemo',
    preview: true,
    previewTitle: 'Callback Demo',

    // Called before preview iframe loads (preview mode only)
    previewBeforeOpenCallback() {
      console.log('1. Preview iframe about to load');
    },

    // Called after preview iframe finishes loading (preview mode only)
    previewOpenCallback() {
      console.log('2. Preview iframe loaded successfully');
    },

    // Called before print dialog opens
    beforeOpenCallback() {
      console.log('3. Print dialog about to open');
    },

    // Called when print dialog opens
    openCallback() {
      console.log('4. Print dialog is now open');
    },

    // Called when print dialog closes (print or cancel)
    closeCallback() {
      console.log('5. Print dialog closed');
    }
  });
}
</script>
```

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

### VuePrintNext Class - Programmatic API Example

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Demonstrates using the VuePrintNext class directly to control printing logic. It allows for dynamic configurations and callback functions for print events. This method requires a CSS selector for the element to be printed.

```vue
<template>
  <div>
    <button @click="handlePrint">Print Report</button>
    <div id="report">
      <h1>Monthly Sales Report</h1>
      <p>Generated: {{ new Date().toLocaleDateString() }}</p>
      <div class="chart">
        <canvas ref="salesChart"></canvas>
      </div>
      <table>
        <thead><tr><th>Month</th><th>Revenue</th></tr></thead>
        <tbody>
          <tr><td>January</td><td>$15,000</td></tr>
          <tr><td>February</td><td>$18,500</td></tr>
          <tr><td>March</td><td>$22,000</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { VuePrintNext } from 'vue-print-next';

function handlePrint() {
  new VuePrintNext({
    el: '#report',
    preview: true,
    previewTitle: 'Sales Report Preview',
    previewPrintBtnLabel: 'Print Report',
    popTitle: 'Monthly Sales Report',
    openCallback() {
      console.log('Print window opened');
    },
    closeCallback() {
      console.log('Print completed or cancelled');
    },
    beforeOpenCallback() {
      console.log('Preparing print preview...');
    }
  });
}
</script>
```

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

### Print Content from a URL with Vue-Print-Next

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

This example demonstrates how to print content from a specified URL by passing the URL string within an object to the v-print directive. Note that the URL must comply with the same-origin policy.

```vue
<template>
  <button v-print="printObj">Print specified URL</button>
</template>

<script setup>
  const printObj = {
    url: 'https://example.com/print-content'
  }
</script>
```

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

### Print Partial Content using CSS Selector with Vue-Print-Next

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

This example shows how to print only a specific part of the page by providing a CSS selector (e.g., an element's ID) to the v-print directive.

```html
<div id="printMe">
  <p>This is the content to be printed</p>
</div>

<button v-print="'#printMe'">Print partial content</button>
```

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

### Set Paper Size and Orientation for Printing in Vue

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

Explains how to configure the paper size and orientation for printing using the `paperSize` and `orientation` parameters. This example sets the paper to 'A4' and orientation to 'landscape', also enabling the preview mode.

```html
<template>
  <div id="printMe">
    <p>This is the content to be printed</p>
  </div>
  <button v-print="printObj">A4 Landscape Print</button>
</template>

<script setup>
  const printObj = {
    el: '#printMe',
    paperSize: 'A4',
    orientation: 'landscape',
    preview: true
  }
</script>
```

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

### Customize Print Preview Toolbar in Vue

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

Shows how to customize the buttons displayed in the print preview toolbar. The `previewTools` object allows enabling or disabling specific tools like zoom, theme toggle, and fullscreen. In this example, only zoom and theme are enabled.

```html
<template>
  <div id="printMe">
    <p>This is the content to be printed</p>
  </div>
  <button v-print="printObj">Custom Toolbar</button>
</template>

<script setup>
  const printObj = {
    el: '#printMe',
    preview: true,
    // Only show zoom and theme toggle buttons, don't show fullscreen button
    previewTools: {
      zoom: true,
      theme: true,
      fullscreen: false
    }
  }
</script>
```

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

### Manual Printing with VuePrintNext Class

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

Programmatically trigger print operations by instantiating the VuePrintNext class, useful for complex logic or event-driven requirements.

```javascript
import {VuePrintNext} from 'vue-print-next';

function handlePrint() {
  new VuePrintNext({el: '#printMe'});
}
```

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

### Configure Advanced Print Options

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Passing a configuration object to v-print to enable print previews, define lifecycle callbacks, and exclude specific elements from the print output.

```vue
<template>
  <div>
    <button v-print="printOptions">Print with Preview</button>
    <div id="printContent">
      <h2>Invoice #12345</h2>
      <p class="no-print">This note will be excluded from printing.</p>
    </div>
  </div>
</template>

<script setup>
import { vPrint } from 'vue-print-next';

const printOptions = {
  el: '#printContent',
  preview: true,
  noPrintSelector: '.no-print',
  openCallback() {
    console.log('Print dialog opened');
  },
  closeCallback() {
    console.log('Print dialog closed');
  }
};
</script>
```

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

### Register Vue Print Next Globally

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

How to register the print plugin globally within a Vue 3 application using the createApp instance.

```typescript
import {createApp} from 'vue';
import App from './App.vue';
import {printPlugin} from 'vue-print-next';

const app = createApp(App);
app.use(printPlugin);
app.mount('#app');
```

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

### Implement Full Page Printing with v-print

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Using the v-print directive without arguments to trigger a print dialog for the entire page content.

```vue
<template>
  <div>
    <button v-print>Print Entire Page</button>
    <div>
      <h1>Page Content</h1>
      <p>This entire page will be printed when the button is clicked.</p>
    </div>
  </div>
</template>

<script setup>
import { vPrint } from 'vue-print-next';
</script>
```

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

### Dark Mode and Window Mode for Print Preview in Vue

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

Illustrates how to enable dark mode and specify the window mode for the print preview interface. `darkMode: true` activates dark mode, and `windowMode: true` uses a non-fullscreen popup window for the preview. `defaultScale` sets the initial zoom level.

```html
<template>
  <div id="printMe">
    <p>This is the content to be printed</p>
  </div>
  <button v-print="printObj">Dark Mode Preview</button>
</template>

<script setup>
  const printObj = {
    el: '#printMe',
    preview: true,
    darkMode: true,
    windowMode: true,
    defaultScale: 0.8
  }
</script>
```

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

### Configure Paper Size and Orientation for Printing in Vue

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Demonstrates how to configure paper size and orientation for printing using VuePrintNext. It covers standard sizes like A4 in portrait or landscape, as well as custom dimensions with specified units.

```vue
<template>
  <div>
    <button @click="printA4Portrait">A4 Portrait</button>
    <button @click="printA4Landscape">A4 Landscape</button>
    <button @click="printCustomSize">Custom Size</button>
    <div id="document">
      <h1>Printable Document</h1>
      <p>Document content with configurable paper settings.</p>
    </div>
  </div>
</template>

<script setup>
import { VuePrintNext } from 'vue-print-next';

// Print with A4 portrait orientation
function printA4Portrait() {
  new VuePrintNext({
    el: '#document',
    preview: true,
    paperSize: 'A4',
    orientation: 'portrait'
  });
}

// Print with A4 landscape orientation
function printA4Landscape() {
  new VuePrintNext({
    el: '#document',
    preview: true,
    paperSize: 'A4',
    orientation: 'landscape'
  });
}

// Print with custom paper dimensions
function printCustomSize() {
  new VuePrintNext({
    el: '#document',
    preview: true,
    paperSize: 'custom',
    customSize: {
      width: '100',
      height: '150',
      unit: 'mm'  // Options: 'mm', 'cm', 'in', 'px'
    },
    orientation: 'portrait'
  });
}
</script>
```

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

### Asynchronously Load URL Content for Printing in Vue

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

Shows how to print content from a URL that needs to be loaded asynchronously. The `asyncUrl` function is provided, which resolves with the URL after a delay. This is useful for dynamic content or content fetched from an API.

```html
<template>
  <button v-print="printObj">Asynchronously load URL and print</button>
</template>

<script setup>
  const printObj = {
    asyncUrl(resolve) {
      setTimeout(() => {
        resolve('https://example.com/print-content');
      }, 2000);
    }
  }
</script>
```

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

### Configure Preview Appearance with Dark Mode and Window Mode

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Control the appearance of the print preview by enabling dark mode or window (non-fullscreen) mode. These options can be used independently or combined for custom preview settings. The 'el' option specifies the content to be printed, and 'preview' must be true to activate preview mode.

```vue
<template>
  <div>
    <button @click="previewDarkMode">Dark Mode Preview</button>
    <button @click="previewWindowMode">Window Mode Preview</button>
    <button @click="previewCombined">Combined Options</button>
    <div id="content">
      <h2>Preview Content</h2>
      <p>This content will be displayed in the print preview.</p>
    </div>
  </div>
</template>

<script setup>
import { VuePrintNext } from 'vue-print-next';

// Preview with dark theme
function previewDarkMode() {
  new VuePrintNext({
    el: '#content',
    preview: true,
    darkMode: true,
    previewTitle: 'Dark Mode Preview'
  });
}

// Preview in window mode (non-fullscreen popup)
function previewWindowMode() {
  new VuePrintNext({
    el: '#content',
    preview: true,
    windowMode: true,
    previewTitle: 'Window Mode Preview'
  });
}

// Combined dark mode, window mode, and custom scale
function previewCombined() {
  new VuePrintNext({
    el: '#content',
    preview: true,
    darkMode: true,
    windowMode: true,
    defaultScale: 0.8,  // 80% zoom
    previewTitle: 'Combined Preview Options'
  });
}
</script>
```

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

### Load Print Content Asynchronously from a URL

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Dynamically load content for printing from a URL that is resolved asynchronously. The 'asyncUrl' callback function receives a 'resolve' function which should be called with the URL string once it's available. This is useful for fetching content based on user actions or data retrieval.

```vue
<template>
  <div>
    <button v-print="asyncPrintOptions">Print Dynamic Content</button>
  </div>
</template>

<script setup>
import { vPrint } from 'vue-print-next';

const asyncPrintOptions = {
  asyncUrl(resolve, vueInstance) {
    // Simulate async operation (API call, data fetch, etc.)
    setTimeout(() => {
      const documentId = 'doc-12345';
      resolve(`https://api.example.com/documents/${documentId}/print`);
    }, 1000);
  },
  preview: true,
  previewTitle: 'Loading Document...'
};
</script>
```

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

### Print Using DOM Element Reference with Vue

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Shows how to print content by passing a direct DOM element reference obtained via Vue's `ref` attribute. This provides a more direct way to target elements for printing compared to CSS selectors.

```vue
<template>
  <div>
    <button @click="handlePrint">Print Section</button>
    <div ref="printElement">
      <h2>Document Content</h2>
      <p>This content will be printed using a DOM element reference.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import { VuePrintNext } from 'vue-print-next';

const printElement: Ref<HTMLElement | null> = ref(null);

function handlePrint() {
  if (printElement.value) {
    new VuePrintNext({
      el: printElement.value,
      preview: true
    });
  }
}
</script>
```

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

### Use v-print Directive in Vue Components

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

Demonstrates applying the v-print directive to trigger full-page or partial-element printing in both Vue 3 and Vue 2 environments.

```html
<!-- Vue 3 Setup -->
<script setup>
  import {vPrint} from 'vue-print-next';
</script>

<template>
  <button v-print>Print entire page</button>
  <button v-print="'#printMe'">Print partial content</button>
  <div id="printMe">Content to print</div>
</template>
```

```javascript
<!-- Vue 2 Options API -->
<script>
  import {vPrint} from "vue-print-next";
  export default {
    directives: { print: vPrint }
  }
</script>

<template>
  <button v-print="'#printMe'">Print</button>
  <div id="printMe">Content</div>
</template>
```

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

### Register Print Plugin Globally

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Instructions for registering the print plugin in both Vue 3 and Vue 2 environments to enable the v-print directive.

```typescript
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { printPlugin } from 'vue-print-next';

const app = createApp(App);
app.use(printPlugin);
app.mount('#app');
```

```javascript
// main.js
import Vue from 'vue';
import App from './App.vue';
import { printPlugin } from 'vue-print-next';

Vue.use(printPlugin);

new Vue({
  render: h => h(App),
}).$mount('#app');
```

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

### Print Content from an External URL

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Print content directly from an external URL using the 'url' option. This functionality is subject to the same-origin policy, meaning the URL must be on the same domain as your application or have appropriate CORS headers configured.

```vue
<template>
  <div>
    <button v-print="urlPrintOptions">Print External Content</button>
  </div>
</template>

<script setup>
import { vPrint } from 'vue-print-next';

const urlPrintOptions = {
  url: 'https://example.com/printable-content.html',
  preview: true,
  previewTitle: 'External Content Preview'
};
</script>
```

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

### Print Multiple Sections Simultaneously with Vue

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Illustrates printing multiple DOM elements at once by providing a comma-separated string of CSS selectors to the `el` option. This is useful for combining content from different parts of the page into a single print job.

```vue
<template>
  <div>
    <button @click="printAllSections">Print All Sections</button>

    <div id="section1" class="print-section">
      <h3>Section 1: Introduction</h3>
      <p>Introduction content goes here...</p>
    </div>

    <div id="section2" class="print-section">
      <h3>Section 2: Main Content</h3>
      <p>Main content goes here...</p>
    </div>

    <div id="section3" class="print-section">
      <h3>Section 3: Conclusion</h3>
      <p>Conclusion content goes here...</p>
    </div>
  </div>
</template>

<script setup>
import { VuePrintNext } from 'vue-print-next';

function printAllSections() {
  new VuePrintNext({
    el: '#section1, #section2, #section3',
    preview: true,
    previewTitle: 'Combined Document Preview'
  });
}
</script>
```

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

### TypeScript Interface for PrintAreaOption in Vue Print Next

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Defines the complete TypeScript interface for all available configuration options for printing in Vue Print Next. This includes settings for paper size, orientation, custom dimensions, preview options, and various callback functions.

```typescript
import type { PrintAreaOption, PaperSize, Orientation, CustomSize, PreviewToolsOption } from 'vue-print-next';

// Paper size options
type PaperSize = 'A0' | 'A1' | 'A2' | 'A3' | 'A4' | 'A5' | 'A6' | 'A7' | 'A8' | 'Letter' | 'Legal' | 'Tabloid' | 'custom';

// Orientation options
type Orientation = 'portrait' | 'landscape';

// Custom size interface
interface CustomSize {
  width: string | number;
  height: string | number;
  unit?: 'mm' | 'cm' | 'in' | 'px';
}

// Preview toolbar options
interface PreviewToolsOption {
  zoom?: boolean;
  theme?: boolean;
  fullscreen?: boolean;
}

// Complete configuration interface
interface PrintAreaOption {
  el?: string | HTMLElement;           // CSS selector or DOM element
  standard?: 'strict' | 'loose' | 'html5';  // Document type (default: 'html5')
  noPrintSelector?: string[] | string; // Elements to exclude
  url?: string;                        // URL to print
  asyncUrl?: (resolve: (url: string) => void, vue: any) => void;
  preview?: boolean;                   // Enable preview (default: false)
  extraHead?: string;                  // Extra <head> content
  extraCss?: string;                   // Extra CSS file URLs
  popTitle?: string;                   // Print window title
  previewTitle?: string;               // Preview title (default: '打印预览')
  previewPrintBtnLabel?: string;       // Print button label (default: '打印')
  zIndex?: number;                     // Preview z-index (default: 20002)
  paperSize?: PaperSize;               // Paper size
  orientation?: Orientation;           // Paper orientation
  customSize?: CustomSize;             // Custom paper dimensions
  previewSize?: PaperSize | CustomSize; // Preview-specific size
  darkMode?: boolean;                  // Dark mode (default: false)
  windowMode?: boolean;                // Window mode (default: false)
  defaultScale?: number;               // Default zoom (default: 1)
  previewTools?: PreviewToolsOption | false;  // Toolbar config
  previewBeforeOpenCallback?: (vue?: any) => void;
  previewOpenCallback?: (vue?: any) => void;
  beforeOpenCallback?: (vue?: any) => void;
  openCallback?: (vue?: any) => void;
  closeCallback?: (vue?: any) => void;
}

```

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

### Add Extra CSS and Head Content for Printing (Vue)

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

This snippet shows how to include external CSS files and custom HTML content within the head section for print styling. It utilizes the `extraCss` and `extraHead` options of VuePrintNext to customize the print output.

```vue
<template>
  <div>
    <button @click="printWithStyles">Print with Custom Styles</button>
    <div id="styledContent">
      <h1 class="custom-title">Styled Document</h1>
      <p class="custom-paragraph">Content with external CSS applied.</p>
    </div>
  </div>
</template>

<script setup>
import { VuePrintNext } from 'vue-print-next';

function printWithStyles() {
  new VuePrintNext({
    el: '#styledContent',
    preview: true,
    // Add external CSS files (comma-separated for multiple)
    extraCss: 'https://cdn.example.com/print-styles.css,https://cdn.example.com/fonts.css',
    // Add extra content to <head>
    extraHead: '<meta name="author" content="Company Name"><link rel="icon" href="/favicon.ico">',
    popTitle: 'Styled Document'
  });
}
</script>
```

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

### Vue 2 Component Usage with v-print Directive

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

This snippet illustrates how to use the `v-print` directive within Vue 2 components for printing. It shows how to print the entire page, a specific section by its ID, or with custom print options defined in a data property.

```vue
<template>
  <div>
    <button v-print>Print Full Page</button>
    <button v-print="'#printSection'">Print Section</button>
    <button v-print="printConfig">Print with Options</button>

    <div id="printSection">
      <h2>Vue 2 Print Demo</h2>
      <p>Compatible with Vue 2 applications.</p>
    </div>
  </div>
</template>

<script>
import { vPrint } from 'vue-print-next';

export default {
  name: 'PrintDemo',
  directives: {
    print: vPrint
  },
  data() {
    return {
      printConfig: {
        el: '#printSection',
        preview: true,
        previewTitle: 'Vue 2 Print Preview',
        openCallback: () => {
          console.log('Print opened');
        }
      }
    };
  }
};
</script>
```

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

### Implement Partial Printing with CSS Selectors

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Passing a CSS selector string to the v-print directive to restrict the printed output to a specific DOM element.

```vue
<template>
  <div>
    <button v-print="'#printMe'">Print Partial Content</button>
    <div id="printMe">
      <h2>Printable Section</h2>
      <p>Only this content will be printed.</p>
    </div>
  </div>
</template>

<script setup>
import { vPrint } from 'vue-print-next';
</script>
```

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

### Custom Paper Size for Printing in Vue

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

Details how to set a custom paper size for printing when standard sizes are not sufficient. The `paperSize` is set to 'custom', and `customSize` object defines the width, height, and unit (e.g., 'mm', 'cm', 'in', 'px'). Preview mode is also enabled.

```html
<template>
  <div id="printMe">
    <p>This is the content to be printed</p>
  </div>
  <button v-print="printObj">Custom Size Print</button>
</template>

<script setup>
  const printObj = {
    el: '#printMe',
    paperSize: 'custom',
    customSize: {
      width: '100',
      height: '150',
      unit: 'mm'
    },
    preview: true
  }
</script>
```

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

### Customize Print Preview Toolbar Buttons

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Customize the visibility of toolbar buttons in the print preview interface using the 'previewTools' option. You can enable or disable specific tools like zoom, theme toggle, and fullscreen. Setting 'previewTools' to false will hide all toolbar buttons.

```vue
<template>
  <div>
    <button @click="fullToolbar">Full Toolbar</button>
    <button @click="minimalToolbar">Minimal Toolbar</button>
    <button @click="noToolbar">No Toolbar</button>
    <div id="printArea">
      <h2>Print Content</h2>
      <p>Content with customizable preview toolbar.</p>
    </div>
  </div>
</template>

<script setup>
import { VuePrintNext } from 'vue-print-next';

// All toolbar buttons enabled (default)
function fullToolbar() {
  new VuePrintNext({
    el: '#printArea',
    preview: true,
    previewTools: {
      zoom: true,       // Show zoom controls
      theme: true,      // Show theme toggle (dark/light)
      fullscreen: true  // Show fullscreen toggle
    }
  });
}

// Only theme and fullscreen controls
function minimalToolbar() {
  new VuePrintNext({
    el: '#printArea',
    preview: true,
    previewTools: {
      zoom: false,      // Hide zoom controls
      theme: true,      // Show theme toggle
      fullscreen: true  // Show fullscreen toggle
    }
  });
}

// Disable all toolbar buttons
function noToolbar() {
  new VuePrintNext({
    el: '#printArea',
    preview: true,
    previewTools: false  // Disable all toolbar buttons
  });
}
</script>
```

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

### Ignore Elements for Printing in Vue

Source: https://github.com/alessandro-pang/vue-print-next/blob/master/README.en.md

Demonstrates how to exclude specific HTML elements from printing by using the `noPrintSelector` option. This is useful for hiding elements like buttons or navigation bars that are not intended for the printed output. The `noPrintSelector` can accept a CSS selector string or an array of selectors.

```html
<template>
  <div id="printMe">
    <p>Gourd baby, gourd baby</p>
    <span class="no-print">This <strong>should not be printed</strong></span>
    <p>Seven flowers on one vine</p>
    <span class="no-print">This <strong>should not be printed</strong></span>
    <p>Not afraid of wind and rain</p>
    <span class="no-print">This <strong>should not be printed</strong></span>
  </div>
  <button v-print="printObj">Ignore elements that should not be printed</button>
</template>

<script setup>
  const printObj = {
    el: '#printMe',
    // Allows using CSS selectors, supports passing an array
    noPrintSelector: '.no-print'
  }
</script>
```

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

### Exclude Elements from Printing using CSS Selectors

Source: https://context7.com/alessandro-pang/vue-print-next/llms.txt

Prevent specific elements from being included in the printed output by providing an array of CSS selectors to the 'noPrintSelector' option. This is useful for hiding elements like internal notes, draft watermarks, or other non-essential content.

```vue
<template>
  <div>
    <button v-print="printOptions">Print Document</button>
    <div id="document">
      <h1>Contract Agreement</h1>
      <p>This is the official contract content.</p>

      <div class="no-print warning">
        <strong>Internal Note:</strong> This section is for internal review only.
      </div>

      <p>Terms and conditions apply.</p>

      <span class="exclude-from-print">Draft watermark - will not print</span>

      <div class="signature-section">
        <p>Signature: _______________</p>
        <p>Date: _______________</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { vPrint } from 'vue-print-next';

const printOptions = {
  el: '#document',
  preview: true,
  // Exclude multiple selectors
  noPrintSelector: ['.no-print', '.exclude-from-print'],
  popTitle: 'Contract Agreement'
};
</script>
```

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