Nuxt 2 Integration (Legacy)
Learn how to integrate Vue Print It into your Nuxt 2 application.
Nuxt 2 is in maintenance mode. Consider upgrading to Nuxt 3 for better performance and support.
Installation
Install the package in your Nuxt 2 project:
Setup
Create a plugin file at plugins/vue-print-it.js:
import Vue from 'vue'
import { createVuePrintIt } from 'vue-print-it'
Vue.use(createVuePrintIt({
windowTitle: 'Nuxt 2 Print Document',
preserveStyles: true,
autoClose: true,
timeout: 1000,
specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes']
}))
Add the plugin to your nuxt.config.js:
export default {
plugins: [
{ src: '~/plugins/vue-print-it.js', mode: 'client' }
]
}
The mode: 'client' option ensures the plugin only runs on the client side, which is required for printing functionality.
Usage
Basic Usage
Use the global $print method in your components:
<template>
<div>
<div id="content">
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
<button @click="$print('content')">Print Content</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'My Document',
content: 'This is the content to print.'
}
}
}
</script>
With Options
Pass configuration options to customize printing:
<template>
<div>
<div id="invoice">
<h1>Invoice #{{ invoiceNumber }}</h1>
<table>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
</tr>
</table>
</div>
<button @click="printInvoice">Print Invoice</button>
</div>
</template>
<script>
export default {
data() {
return {
invoiceNumber: '12345',
items: [
{ id: 1, name: 'Item 1', price: '$10.00' },
{ id: 2, name: 'Item 2', price: '$20.00' }
]
}
},
methods: {
printInvoice() {
this.$print('invoice', {
windowTitle: `Invoice ${this.invoiceNumber}`,
specs: { width: 800, height: 600 },
styles: [
'@media print { table { border-collapse: collapse; } }',
'td { padding: 8px; border: 1px solid #ddd; }'
]
})
}
}
}
</script>
Using Composable (with Composition API)
If you’re using @nuxtjs/composition-api:
<template>
<div>
<div id="report">
<h1>{{ reportTitle }}</h1>
<div v-html="reportContent"></div>
</div>
<button @click="handlePrint">Print Report</button>
</div>
</template>
<script>
import { ref } from '@nuxtjs/composition-api'
import { usePrint } from 'vue-print-it'
export default {
setup() {
const { print } = usePrint()
const reportTitle = ref('Monthly Report')
const reportContent = ref('<p>Report data here...</p>')
const handlePrint = () => {
print('report', {
windowTitle: reportTitle.value,
preserveStyles: true
})
}
return {
reportTitle,
reportContent,
handlePrint
}
}
}
</script>
Advanced Examples
With Event Callbacks
Handle print events for better user experience:
<template>
<div>
<div id="document">
<h1>{{ document.title }}</h1>
<p>{{ document.content }}</p>
</div>
<button @click="printDocument" :disabled="isPrinting">
{{ isPrinting ? 'Printing...' : 'Print Document' }}
</button>
<p v-if="status" class="status">{{ status }}</p>
</div>
</template>
<script>
export default {
data() {
return {
document: {
title: 'Important Document',
content: 'Document content here...'
},
isPrinting: false,
status: ''
}
},
methods: {
printDocument() {
this.$print('document', {
windowTitle: this.document.title,
onBeforePrint: () => {
this.isPrinting = true
this.status = 'Preparing document...'
},
onAfterPrint: () => {
this.isPrinting = false
this.status = 'Print completed!'
setTimeout(() => {
this.status = ''
}, 3000)
},
onPrintError: (error) => {
this.isPrinting = false
this.status = `Error: ${error.message}`
}
})
}
}
}
</script>
Async Data Printing
Print content fetched from API:
<template>
<div>
<div v-if="article" id="article">
<h1>{{ article.title }}</h1>
<div class="meta">
<span>By {{ article.author }}</span>
<time>{{ formatDate(article.publishedAt) }}</time>
</div>
<div v-html="article.body"></div>
</div>
<button v-if="article" @click="printArticle">
Print Article
</button>
</div>
</template>
<script>
export default {
async asyncData({ $axios, params }) {
const article = await $axios.$get(`/api/articles/${params.id}`)
return { article }
},
methods: {
formatDate(date) {
return new Date(date).toLocaleDateString()
},
printArticle() {
this.$print('article', {
windowTitle: this.article.title,
styles: [
'@media print {',
' .meta { font-size: 12px; color: #666; }',
' img { max-width: 100%; }',
'}'
]
})
}
}
}
</script>
Custom Print Styles
Add print-specific styling:
<template>
<div>
<div id="page">
<header class="no-print">
<nav>Navigation menu</nav>
</header>
<main class="content">
<h1>{{ pageTitle }}</h1>
<p>{{ pageContent }}</p>
</main>
<footer class="no-print">
<p>Footer content</p>
</footer>
</div>
<button class="no-print" @click="printPage">
Print Page
</button>
</div>
</template>
<script>
export default {
data() {
return {
pageTitle: 'Page Title',
pageContent: 'Page content here...'
}
},
methods: {
printPage() {
this.$print('page', {
windowTitle: this.pageTitle,
styles: [
'@media print {',
' .no-print { display: none !important; }',
' .content { padding: 20px; }',
' h1 { color: #000; font-size: 24pt; }',
'}'
]
})
}
}
}
</script>
<style scoped>
@media print {
.no-print {
display: none;
}
}
</style>
Configuration Options
Plugin Configuration
Set global defaults when registering the plugin:
import Vue from 'vue'
import { createVuePrintIt } from 'vue-print-it'
Vue.use(createVuePrintIt({
// Global configuration
windowTitle: 'Nuxt 2 Print Document',
preserveStyles: true,
autoClose: true,
timeout: 1000,
specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'],
globalMethodName: '$print', // Custom method name
styles: [
// Global print styles
'@page { margin: 1in; }',
'@media print { .no-print { display: none; } }'
]
}))
Per-Print Options
Override global settings for individual print operations:
this.$print('element-id', {
windowTitle: 'Custom Title',
specs: { width: 800, height: 600 },
timeout: 2000,
autoClose: false,
preserveStyles: true,
styles: ['body { font-size: 14px; }'],
onBeforePrint: () => console.log('Printing...'),
onAfterPrint: () => console.log('Done!'),
onPrintError: (error) => console.error('Error:', error)
})
Best Practices
Client-Side Only
Always set mode: 'client' in your plugin registration:
export default {
plugins: [
{ src: '~/plugins/vue-print-it.js', mode: 'client' }
]
}
Check for Client Environment
When using in methods, check if running on client:
methods: {
printContent() {
if (process.client) {
this.$print('content')
}
}
}
Hide Non-Printable Elements
Use CSS to hide elements that shouldn’t be printed:
<style>
@media print {
.no-print,
button,
nav,
footer {
display: none !important;
}
}
</style>
Preserve Styles
Always set preserveStyles: true to ensure your component styles are included:
this.$print('content', {
preserveStyles: true
})
TypeScript Support
For TypeScript projects, add type definitions:
// types/vue-print-it.d.ts
import Vue from 'vue'
import { PrintOptions } from 'vue-print-it'
declare module 'vue/types/vue' {
interface Vue {
$print: (element: HTMLElement | string, options?: PrintOptions) => Promise<void>
}
}
Troubleshooting
Plugin Not Available
Ensure the plugin is registered with mode: 'client' in nuxt.config.js.
Styles Not Applied
Check that preserveStyles: true is set in your configuration.
SSR Errors
Wrap print calls in client-side checks:
if (process.client) {
this.$print('element-id')
}
Window Not Opening
Adjust the specs option or check browser popup blockers:
specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes']
// or
specs: { width: 1024, height: 768 }
Migration to Nuxt 3
If you’re planning to upgrade to Nuxt 3, see the Nuxt 3 integration guide for updated setup instructions.
Next Steps
Nuxt 3 Migration
Upgrade to Nuxt 3 for better performance
Configuration
Explore all configuration options
