Skip to main content

​
Overview

The createVuePrintIt function creates a Vue 3 plugin that adds global printing functionality to your application. It registers a global method (default $print) that can be accessed from any component.

​
Type Signature

function createVuePrintIt(
  options?: GlobalPrintOptions & { globalMethodName?: string }
): {
  install(app: App): void
}

​
Parameters

​
options
object
Configuration options for the print plugin
​
globalMethodName
string
default:"$print"
Custom name for the global method
​
name
string
default:"_blank"
Window name for the print window
​
specs
string[] | { width?: number; height?: number }
Window specifications as array of strings or object with dimensions
​
styles
string[]
default:"[]"
Array of custom CSS styles to apply globally. Can be CSS strings or URLs to stylesheets
​
timeout
number
default:"1000"
Delay in milliseconds before printing starts
​
autoClose
boolean
default:"true"
Whether to automatically close the print window after printing
​
windowTitle
string
Title for the print window (defaults to current document title)
​
preserveStyles
boolean
default:"true"
Whether to preserve original page styles in the print output

​
Returns

Returns a Vue plugin object with an install method that can be used with app.use(). The plugin registers the following global methods:
  • $print (or custom name): Main print function
  • $print.getBridgeStatus: Get bridge status (only if bridge plugin is installed)
  • $print.getAvailablePrinters: Get available printers (only if bridge plugin is installed)
  • $print.printDirect: Print directly to a printer (only if bridge plugin is installed)

​
Usage

​
Basic Setup

import { createApp } from 'vue'
import { createVuePrintIt } from 'vue-print-it'
import App from './App.vue'

const app = createApp(App)

// Install with default options
app.use(createVuePrintIt())

app.mount('#app')

​
With Global Options

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

app.use(createVuePrintIt({
  windowTitle: 'My Application Print',
  autoClose: true,
  timeout: 800,
  preserveStyles: true,
  styles: [
    // Add global styles that apply to all prints
    'https://cdn.example.com/print-styles.css',
    `
      @media print {
        body { font-size: 12pt; }
        .no-print { display: none; }
      }
    `
  ]
}))

​
Custom Global Method Name

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

app.use(createVuePrintIt({
  globalMethodName: '$myPrint',
  windowTitle: 'Custom Print'
}))

​
Using in Components (Options API)

<template>
  <div>
    <div id="print-section">
      <h1>Content to print</h1>
      <p>This will be printed</p>
    </div>
    <button @click="handlePrint">Print</button>
  </div>
</template>

<script>
export default {
  methods: {
    async handlePrint() {
      try {
        // Global options are automatically applied
        await this.$print('print-section', {
          // Override or add local options
          windowTitle: 'My Custom Print'
        })
      } catch (error) {
        console.error('Print failed:', error)
      }
    }
  }
}
</script>

​
Using in Components (Composition API)

<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const print = instance?.appContext.config.globalProperties.$print

const handlePrint = async () => {
  try {
    await print('print-section')
  } catch (error) {
    console.error('Print failed:', error)
  }
}
</script>
For Composition API, it’s recommended to use the usePrint composable instead of accessing the global property directly.

​
With Bridge Plugin

When the bridge plugin is installed, additional methods are automatically added: 
import { createVuePrintIt } from 'vue-print-it'
import { createVuePrintItBridge } from 'vue-print-it/bridge'

// Install bridge plugin first
app.use(createVuePrintItBridge({
  baseUrl: 'http://localhost:8765',
  autoConnect: true
}))

// Then install main plugin
app.use(createVuePrintIt({
  windowTitle: 'My App Print'
}))

<script>
export default {
  methods: {
    async checkBridge() {
      const status = await this.$print.getBridgeStatus()
      console.log('Bridge status:', status)
    },
    
    async getPrinters() {
      const printers = await this.$print.getAvailablePrinters()
      console.log('Available printers:', printers)
    },
    
    async printToPrinter() {
      await this.$print('print-section', {
        useBridge: true,
        printerName: 'HP LaserJet',
        copies: 2
      })
    }
  }
}
</script>

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us