Configuration Guide - Vue Print It

Overview

Vue Print It provides extensive configuration options at multiple levels:

Global Options: Set defaults when installing the plugin
Local Options: Override per print operation
Bridge Options: Configure the bridge plugin for direct printing

Global Configuration

Set global defaults when installing the plugin. These apply to all print operations unless overridden.

import { createVuePrintIt } from 'vue-print-it'

app.use(createVuePrintIt({
  name: '_blank',
  specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'],
  styles: [],
  timeout: 1000,
  autoClose: true,
  windowTitle: 'Document',
  preserveStyles: true
}))

Global Options Reference

From src/types.ts:38:

Option	Type	Default	Description
`name`	`string`	`'_blank'`	Window name for the print window
`specs`	`string[] \| object`	`['fullscreen=yes', ...]`	Window specifications
`styles`	`string[]`	`[]`	Array of custom CSS styles
`timeout`	`number`	`1000`	Delay before printing (ms)
`autoClose`	`boolean`	`true`	Auto-close print window
`windowTitle`	`string`	`document.title`	Print window title
`preserveStyles`	`boolean`	`true`	Preserve original page styles
`globalMethodName`	`string`	`'$print'`	Custom name for global method

Print Operation Configuration

Basic Print Options

Override global settings for individual print operations:

import { usePrint } from 'vue-print-it'

const { print } = usePrint()

await print('element-id', {
  windowTitle: 'Invoice #12345',
  autoClose: true,
  timeout: 1500,
  preserveStyles: true
})

Complete Print Options Reference

From src/types.ts:4:

Option	Type	Default	Description
`name`	`string`	`'_blank'`	Window name for the print window
`specs`	`string[] \| object`	See below	Window specifications
`styles`	`string[]`	`[]`	Custom CSS styles
`timeout`	`number`	`1000`	Delay before printing (ms)
`autoClose`	`boolean`	`true`	Auto-close print window
`windowTitle`	`string`	`document.title`	Print window title
`preserveStyles`	`boolean`	`true`	Preserve page styles
`onBeforePrint`	`Function`	`undefined`	Callback before printing
`onAfterPrint`	`Function`	`undefined`	Callback after printing
`onPrintError`	`Function`	`undefined`	Callback on error
`useBridge`	`boolean`	`false`	Use bridge for direct printing
`printerName`	`string`	`undefined`	Printer name for bridge
`copies`	`number`	`1`	Number of copies
`contentType`	`'html' \| 'pdf'`	`'html'`	Content type for bridge

Window Configuration

Window Name

Specifies the window target:

// Open in new window (default)
await print('content', { name: '_blank' })

// Reuse same print window
await print('content', { name: 'print-window' })

// Open in parent window
await print('content', { name: '_parent' })

Window Specifications (Array)

Use string array for detailed window control:

await print('content', {
  specs: [
    'fullscreen=yes',
    'titlebar=yes',
    'scrollbars=yes',
    'toolbar=no',
    'menubar=no',
    'location=no'
  ]
})

Window Specifications (Object)

Use object for simple width/height control:

// Fixed size window
await print('content', {
  specs: {
    width: 800,
    height: 600
  }
})

// Only width
await print('content', {
  specs: { width: 1024 }
})

See implementation in src/composables/usePrint.ts:233.

Style Configuration

Preserve Page Styles

Include all original page styles in print window:

// Include all page styles (default)
await print('content', {
  preserveStyles: true
})

// Exclude page styles
await print('content', {
  preserveStyles: false
})

Custom Inline Styles

Add custom CSS rules:

await print('content', {
  styles: [
    'body { font-family: Arial, sans-serif; }',
    'h1 { color: #333; font-size: 24px; }',
    '@media print { .no-print { display: none; } }',
    '@page { margin: 2cm; size: A4; }'
  ]
})

External Stylesheets

Include external CSS files:

await print('content', {
  styles: [
    'https://cdn.example.com/print-styles.css',
    '/assets/print.css',
    './styles/invoice.css'
  ]
})

Mixed Styles

Combine inline and external styles:

await print('content', {
  styles: [
    'https://cdn.example.com/print-styles.css',
    'body { margin: 0; padding: 20px; }',
    '/assets/custom-print.css',
    '@media print { .footer { position: fixed; bottom: 0; } }'
  ]
})

Timing Configuration

Print Delay (timeout)

Control when printing starts after window opens:

// Quick print (500ms)
await print('content', { timeout: 500 })

// Default delay (1000ms)
await print('content', { timeout: 1000 })

// Wait for images/styles (2000ms)
await print('content', { timeout: 2000 })

// Very slow connection (5000ms)
await print('content', { timeout: 5000 })

The timeout allows stylesheets and images to load before printing (see src/composables/usePrint.ts:276).

Auto-Close Window

Control whether print window closes automatically:

// Auto-close after printing (default)
await print('content', { autoClose: true })

// Keep window open
await print('content', { autoClose: false })

Lifecycle Callbacks

Before Print

Execute code before printing starts:

await print('content', {
  onBeforePrint: async () => {
    console.log('Preparing to print...')
    // Load data, show loading spinner, etc.
    await loadPrintData()
  }
})

After Print

Execute code after printing completes:

await print('content', {
  onAfterPrint: async () => {
    console.log('Print completed')
    // Log print event, hide loading spinner, etc.
    await logPrintEvent()
  }
})

Error Handling

Handle print errors:

await print('content', {
  onPrintError: (error: Error) => {
    console.error('Print failed:', error.message)
    // Show error message, retry, etc.
    showErrorNotification(error.message)
  }
})

Complete Lifecycle Example

const loading = ref(false)
const errorMsg = ref('')

const printDocument = async () => {
  await print('invoice', {
    windowTitle: 'Invoice #12345',
    onBeforePrint: async () => {
      loading.value = true
      errorMsg.value = ''
      console.log('Starting print...')
      await prepareInvoiceData()
    },
    onAfterPrint: async () => {
      loading.value = false
      console.log('Print completed successfully')
      await trackPrintEvent('invoice', '12345')
    },
    onPrintError: (error: Error) => {
      loading.value = false
      errorMsg.value = error.message
      console.error('Print error:', error)
    }
  })
}

Bridge Configuration

Bridge Plugin Options

Configure the bridge plugin at installation:

import { createVuePrintItBridge } from 'vue-print-it'

app.use(createVuePrintItBridge({
  baseUrl: 'http://localhost:8765',
  port: 8765,
  autoConnect: true,
  autoSelectDefault: true,
  timeout: 2000,
  retryAttempts: 3,
  defaultPrinter: 'HP LaserJet Pro',
  headers: {
    'X-API-Key': 'your-api-key'
  },
  debug: true
}))

Bridge Options Reference

From src/types.ts:58:

Option	Type	Default	Description
`baseUrl`	`string`	`'http://localhost:8765'`	Bridge service URL
`port`	`number`	`8765`	Bridge service port
`autoConnect`	`boolean`	`false`	Auto-connect on install
`autoSelectDefault`	`boolean`	`true`	Auto-select default printer
`timeout`	`number`	`2000`	Connection timeout (ms)
`retryAttempts`	`number`	`3`	Retry attempts for failed connections
`defaultPrinter`	`string`	`undefined`	Default printer name
`headers`	`Record<string, string>`	`{}`	Custom HTTP headers
`debug`	`boolean`	`false`	Enable debug logging

Bridge URL Configuration

// Local development
app.use(createVuePrintItBridge({
  baseUrl: 'http://localhost:8765'
}))

// Production server
app.use(createVuePrintItBridge({
  baseUrl: 'http://print-server.company.local:8765'
}))

// Custom port
app.use(createVuePrintItBridge({
  baseUrl: 'http://localhost',
  port: 9000
}))

// HTTPS
app.use(createVuePrintItBridge({
  baseUrl: 'https://secure-print-server.com:8765'
}))

Bridge Connection Settings

// Auto-connect on app start
app.use(createVuePrintItBridge({
  autoConnect: true,
  timeout: 3000,
  retryAttempts: 5
}))

// Manual connection (connect when needed)
app.use(createVuePrintItBridge({
  autoConnect: false
}))

// Long timeout for slow networks
app.use(createVuePrintItBridge({
  timeout: 10000,
  retryAttempts: 10
}))

Bridge Authentication

Add custom headers for authentication:

app.use(createVuePrintItBridge({
  baseUrl: 'http://secure-print-server.com:8765',
  headers: {
    'X-API-Key': process.env.PRINT_API_KEY,
    'X-Client-ID': 'my-app',
    'Authorization': 'Bearer ' + getAuthToken()
  }
}))

Bridge Printer Configuration

// Specify default printer
app.use(createVuePrintItBridge({
  defaultPrinter: 'HP LaserJet Pro M404n',
  autoSelectDefault: false // Don't override with auto-selected printer
}))

// Auto-select first available
app.use(createVuePrintItBridge({
  autoSelectDefault: true // Selects system default or first available
}))

Bridge Print Options

Using Bridge for Print Operations

await print('content', {
  useBridge: true,
  printerName: 'HP LaserJet Pro',
  copies: 2,
  contentType: 'html'
})

Bridge Print Configuration

Option	Type	Default	Description
`useBridge`	`boolean`	`false`	Enable bridge printing
`printerName`	`string`	Auto-selected	Target printer name
`copies`	`number`	`1`	Number of copies
`contentType`	`'html' \| 'pdf'`	`'html'`	Content type

Printer Selection Logic

From src/composables/usePrint.ts:187:

Uses printerName if specified in options
Falls back to default printer from bridge state
Refreshes printer list if no default found
Uses first available printer if all else fails

// Explicit printer
await print('content', {
  useBridge: true,
  printerName: 'HP LaserJet Pro'
})

// Use default printer (auto-selected)
await print('content', {
  useBridge: true
})

Direct Print Method

Skip DOM and print raw HTML:

const { printDirect } = usePrint()

const response = await printDirect('<h1>Invoice</h1>', {
  printer_name: 'HP LaserJet Pro',
  content_type: 'html',
  copies: 2,
  options: {
    paper_size: 'A4',
    orientation: 'portrait'
  }
})

console.log(`Job ID: ${response.job_id}`)

Configuration Priority

Options are merged with the following priority (highest to lowest):

Local options (passed to individual print call)
Global options (set during plugin installation)
Default options (built-in defaults)

// Global: timeout = 1000, autoClose = true
app.use(createVuePrintIt({
  timeout: 1000,
  autoClose: true
}))

// Local: timeout = 2000 (overrides global)
// autoClose = true (inherited from global)
await print('content', {
  timeout: 2000
})

See implementation in src/composables/usePrint.ts:323.

Advanced Configuration Examples

Complete Global Setup

import { createApp } from 'vue'
import { createVuePrintIt, createVuePrintItBridge } from 'vue-print-it'

const app = createApp(App)

// Global print configuration
app.use(createVuePrintIt({
  globalMethodName: '$print',
  windowTitle: 'Company Name - Print',
  autoClose: true,
  timeout: 1500,
  preserveStyles: true,
  styles: [
    'https://cdn.company.com/print-styles.css',
    '@page { margin: 2cm; size: A4; }',
    'body { font-family: Arial, sans-serif; }'
  ],
  specs: {
    width: 1024,
    height: 768
  }
}))

// Bridge configuration
app.use(createVuePrintItBridge({
  baseUrl: process.env.PRINT_SERVER_URL || 'http://localhost:8765',
  autoConnect: true,
  autoSelectDefault: true,
  timeout: 5000,
  retryAttempts: 5,
  defaultPrinter: process.env.DEFAULT_PRINTER,
  headers: {
    'X-API-Key': process.env.PRINT_API_KEY,
    'X-Environment': process.env.NODE_ENV
  },
  debug: process.env.NODE_ENV === 'development'
}))

Invoice Printing Configuration

const printInvoice = async (invoiceId: string) => {
  await print('invoice', {
    windowTitle: `Invoice #${invoiceId}`,
    preserveStyles: true,
    timeout: 2000,
    autoClose: true,
    styles: [
      '/assets/invoice-print.css',
      '@page { size: A4; margin: 1cm; }',
      '.no-print { display: none; }',
      'body { font-size: 12px; line-height: 1.5; }'
    ],
    onBeforePrint: async () => {
      await loadInvoiceData(invoiceId)
      console.log(`Printing invoice ${invoiceId}`)
    },
    onAfterPrint: async () => {
      await markInvoicePrinted(invoiceId)
      console.log('Invoice printed successfully')
    },
    onPrintError: (error) => {
      console.error('Invoice print failed:', error)
      showNotification('Failed to print invoice', 'error')
    }
  })
}

Label Printing Configuration

const printLabel = async (labelData: string) => {
  await print('label', {
    useBridge: true,
    printerName: 'Zebra-Label-Printer',
    copies: 1,
    contentType: 'html',
    preserveStyles: false,
    timeout: 500,
    styles: [
      '@page { size: 4in 6in; margin: 0; }',
      'body { margin: 0; padding: 0; }'
    ]
  })
}

Get Started

Core Concepts

Usage Guides

Framework Integration

Advanced

​Overview

​Global Configuration

​Global Options Reference

​Print Operation Configuration

​Basic Print Options

​Complete Print Options Reference

​Window Configuration

​Window Name

​Window Specifications (Array)

​Window Specifications (Object)

​Style Configuration

​Preserve Page Styles

​Custom Inline Styles

​External Stylesheets

​Mixed Styles

​Timing Configuration

​Print Delay (timeout)

​Auto-Close Window

​Lifecycle Callbacks

​Before Print

​After Print

​Error Handling

​Complete Lifecycle Example

​Bridge Configuration

​Bridge Plugin Options

​Bridge Options Reference

​Bridge URL Configuration

​Bridge Connection Settings

​Bridge Authentication

​Bridge Printer Configuration

​Bridge Print Options

​Using Bridge for Print Operations

​Bridge Print Configuration

​Printer Selection Logic

​Direct Print Method

​Configuration Priority

​Advanced Configuration Examples

​Complete Global Setup

​Invoice Printing Configuration

​Label Printing Configuration

​Next Steps

TypeScript Support

Bridge Setup

Build docs developers (and LLMs) love