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>
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
}))
<template>
<button @click="$vuePrint('content')">Print</button>
</template>
Common naming conventions
Default
Namespaced
Descriptive
Framework-specific
app.use(createVuePrintIt({
globalMethodName: '$print' // Default
}))
<template>
<button @click="$print('content')">Print</button>
</template>
app.use(createVuePrintIt({
globalMethodName: '$vuePrint'
}))
<template>
<button @click="$vuePrint('content')">Print</button>
</template>
app.use(createVuePrintIt({
globalMethodName: '$printIt'
}))
<template>
<button @click="$printIt('content')">Print</button>
</template>
// For Quasar
app.use(createVuePrintIt({
globalMethodName: '$qPrint'
}))
// For Nuxt
app.use(createVuePrintIt({
globalMethodName: '$nuxtPrint'
}))
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>
}
}
$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
Use composable in script setup
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>
Avoid complex inline handlers
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
