Skip to main content
When you register Vue Print It as a plugin, it adds a global $print method (or your custom name) that can be used directly in templates.

​
Basic template usage

The simplest way to use Vue Print It is with the global method in your template: 
<template>
  <div>
    <div id="content">
      <h1>Hello World!</h1>
      <p>This content will be printed.</p>
    </div>
    
    <button @click="$print('content')">Print</button>
  </div>
</template>

​
With options

Pass options as the second argument: 
<template>
  <div>
    <div id="invoice">
      <h1>Invoice #12345</h1>
      <p>Amount: $100.00</p>
    </div>
    
    <button @click="$print('invoice', { 
      windowTitle: 'Invoice #12345',
      timeout: 1500,
      specs: { width: 800, height: 600 }
    })">
      Print Invoice
    </button>
  </div>
</template>

​
Accessing in script

In Options API, access via this: 
<script>
export default {
  methods: {
    handlePrint() {
      this.$print('content', {
        windowTitle: 'My Document',
        onAfterPrint: () => {
          console.log('Print completed')
        }
      })
    }
  }
}
</script>
In Composition API, use getCurrentInstance: 
<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

function handlePrint() {
  if (instance) {
    instance.proxy.$print('content')
  }
}
</script>
For Composition API, it’s recommended to use the usePrint composable instead of getCurrentInstance.

​
Custom method name

Avoid naming conflicts by using a custom global method name: 
// main.ts
import { createApp } from 'vue'
import { createVuePrintIt } from 'vue-print-it'

const app = createApp(App)

app.use(createVuePrintIt({
  globalMethodName: '$vuePrint' // Custom name
}))
Then use your custom name in templates: 
<template>
  <button @click="$vuePrint('content')">Print</button>
</template>

​
Common naming conventions

app.use(createVuePrintIt({
  globalMethodName: '$print' // Default
}))

<template>
  <button @click="$print('content')">Print</button>
</template>

​
Inline event handlers

Use the global method directly in event handlers: 
<template>
  <div>
    <div id="report">
      <h1>Sales Report</h1>
      <table>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.value }}</td>
        </tr>
      </table>
    </div>
    
    <!-- Simple inline handler -->
    <button @click="$print('report')">
      Print Report
    </button>
    
    <!-- With inline options -->
    <button @click="$print('report', { 
      windowTitle: 'Sales Report',
      preserveStyles: true 
    })">
      Print with Styles
    </button>
    
    <!-- With multiple options -->
    <button @click="$print('report', {
      windowTitle: 'Sales Report',
      specs: { width: 1024, height: 768 },
      timeout: 1500,
      styles: ['@page { margin: 1in; }']
    })">
      Print Custom
    </button>
  </div>
</template>

​
With v-for

Print individual items from a list: 
<template>
  <div>
    <div v-for="invoice in invoices" :key="invoice.id">
      <div :id="`invoice-${invoice.id}`" class="invoice">
        <h2>Invoice #{{ invoice.number }}</h2>
        <p>Amount: ${{ invoice.amount }}</p>
        <p>Customer: {{ invoice.customer }}</p>
      </div>
      
      <button @click="$print(`invoice-${invoice.id}`, {
        windowTitle: `Invoice #${invoice.number}`
      })">
        Print This Invoice
      </button>
    </div>
  </div>
</template>

<script setup>
const invoices = [
  { id: 1, number: '12345', amount: 100, customer: 'John Doe' },
  { id: 2, number: '12346', amount: 200, customer: 'Jane Smith' },
  { id: 3, number: '12347', amount: 150, customer: 'Bob Johnson' }
]
</script>

​
With conditional rendering

Print different content based on conditions: 
<template>
  <div>
    <div id="detailed-view" v-if="showDetails">
      <h1>Detailed Report</h1>
      <p>All the details...</p>
    </div>
    
    <div id="summary-view" v-else>
      <h1>Summary Report</h1>
      <p>Just the summary...</p>
    </div>
    
    <button @click="$print(showDetails ? 'detailed-view' : 'summary-view')">
      Print Current View
    </button>
    
    <button @click="showDetails = !showDetails">
      Toggle View
    </button>
  </div>
</template>

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

const showDetails = ref(true)
</script>

​
Multiple print actions

Create multiple print buttons for different content: 
<template>
  <div>
    <div id="section-a">
      <h2>Section A</h2>
      <p>Content for section A</p>
    </div>
    
    <div id="section-b">
      <h2>Section B</h2>
      <p>Content for section B</p>
    </div>
    
    <div id="all-sections">
      <h1>Complete Document</h1>
      <div id="section-a-copy">
        <h2>Section A</h2>
        <p>Content for section A</p>
      </div>
      <div id="section-b-copy">
        <h2>Section B</h2>
        <p>Content for section B</p>
      </div>
    </div>
    
    <div class="print-actions no-print">
      <button @click="$print('section-a')">
        Print Section A
      </button>
      <button @click="$print('section-b')">
        Print Section B
      </button>
      <button @click="$print('all-sections')">
        Print All
      </button>
    </div>
  </div>
</template>

<style>
@media print {
  .no-print {
    display: none;
  }
}
</style>

​
TypeScript support

Declare the global property for TypeScript: 
// vite-env.d.ts or global.d.ts
import type { PrintOptions } from 'vue-print-it'

declare module 'vue' {
  interface ComponentCustomProperties {
    $print: (element: HTMLElement | string, options?: PrintOptions) => Promise<void>
  }
}
Now TypeScript will recognize $print in your components: 
<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import type { PrintOptions } from 'vue-print-it'

const instance = getCurrentInstance()

function handlePrint() {
  const options: PrintOptions = {
    windowTitle: 'My Document',
    preserveStyles: true
  }
  
  if (instance) {
    instance.proxy.$print('content', options)
  }
}
</script>

​
Best practices

While the global method works in script setup via getCurrentInstance, it’s more idiomatic to use the usePrint composable:
<script setup>
import { usePrint } from 'vue-print-it'
const { print } = usePrint()
</script>
For complex logic, use a method instead of inline handlers:
<!-- ❌ Avoid -->
<button @click="$print('content', { 
  onBeforePrint: () => { /* complex logic */ },
  onAfterPrint: () => { /* complex logic */ }
})">

<!-- ✅ Better -->
<button @click="handlePrint">

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

const instance = getCurrentInstance()

function handlePrint() {
  instance.proxy.$print('content', {
    onBeforePrint: () => { /* complex logic */ },
    onAfterPrint: () => { /* complex logic */ }
  })
}
</script>
If you’re not sure the plugin is installed, check first:
<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

function handlePrint() {
  if (instance?.proxy.$print) {
    instance.proxy.$print('content')
  } else {
    console.error('Vue Print It plugin not installed')
  }
}
</script>

​
Next steps

Composable

Use the usePrint composable instead

Event callbacks

Handle print lifecycle events

Plugin system

Understand how the plugin works

Configuration

Configure global options

Build docs developers (and LLMs) love

Get started for freeTalk to us