Skip to main content

​
Quasar Framework Integration

Learn how to integrate Vue Print It into your Quasar application using the boot file system.

​
Installation

First, install the package in your Quasar project: 
npm install vue-print-it

​
Setup

1
Create a Boot File
2
Use the Quasar CLI to generate a new boot file:
3
quasar new boot vue-print-it
4
Configure the Boot File
5
Edit the generated boot file at src/boot/vue-print-it.ts:
6
import { boot } from 'quasar/wrappers'
import { createVuePrintIt } from 'vue-print-it'

export default boot(({ app }) => {
  app.use(createVuePrintIt({
    // Global configuration for your Quasar app
    windowTitle: 'Quasar Print Document',
    preserveStyles: true,
    autoClose: true,
    timeout: 1000,
    specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'],
    globalMethodName: '$qPrint' // Optional: Quasar-specific method name
  }))
})
7
Register the Boot File
8
Add the boot file to your quasar.conf.js:
9
// quasar.conf.js
module.exports = function (/* ctx */) {
  return {
    // ...
    boot: [
      'vue-print-it' // Add this line
    ],
    // ...
  }
}

​
Usage in Components

Once configured, you can use the print functionality in any Quasar component:

​
Using Global Method

<template>
  <q-page>
    <div id="quasar-content">
      <q-card>
        <q-card-section>
          <div class="text-h6">Printable Content</div>
          <p>This content will be printed with Quasar styles preserved.</p>
        </q-card-section>
      </q-card>
    </div>
    
    <q-btn 
      color="primary" 
      icon="print" 
      label="Print" 
      @click="$print('quasar-content')"
    />
  </q-page>
</template>

​
Using Custom Method Name

If you configured a custom method name (like $qPrint in the example above): 
<template>
  <q-page>
    <div id="invoice">
      <q-card>
        <q-card-section>
          <div class="text-h6">Invoice #12345</div>
          <div class="text-body1">Amount: $100.00</div>
        </q-card-section>
      </q-card>
    </div>
    
    <q-btn 
      color="primary" 
      icon="print" 
      label="Print Invoice" 
      @click="$qPrint('invoice', { windowTitle: 'Invoice Print' })"
    />
  </q-page>
</template>

​
Using the Composable

<template>
  <q-page>
    <div id="report-content">
      <q-table
        :rows="rows"
        :columns="columns"
        row-key="id"
      />
    </div>
    
    <q-btn 
      color="primary" 
      icon="print" 
      label="Print Report" 
      @click="handlePrint"
    />
  </q-page>
</template>

<script setup lang="ts">
import { usePrint } from 'vue-print-it'

const { print } = usePrint()

function handlePrint() {
  print('report-content', {
    windowTitle: 'Quasar Report',
    styles: [
      '@media print { .q-table__bottom { display: none; } }'
    ],
    onBeforePrint: () => {
      console.log('Printing Quasar report...')
    }
  })
}
</script>

​
Configuration Options

​
Boot File Configuration

You can customize the global defaults when registering the plugin: 
app.use(createVuePrintIt({
  windowTitle: 'Quasar Print Document',
  preserveStyles: true,        // Preserve Quasar component styles
  autoClose: true,             // Auto-close print window after printing
  timeout: 1000,               // Delay before triggering print dialog
  specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'],
  globalMethodName: '$qPrint', // Custom global method name
  styles: [
    // Add global print styles
    '@page { margin: 1in; }',
    '@media print { .no-print { display: none; } }'
  ]
}))

​
Per-Print Configuration

Override global settings for individual print operations: 
$print('element-id', {
  windowTitle: 'Custom Title',
  specs: { width: 800, height: 600 },
  styles: ['body { font-size: 14px; }'],
  onBeforePrint: () => console.log('Printing...'),
  onAfterPrint: () => console.log('Print complete!'),
  onPrintError: (error) => console.error('Print failed:', error)
})

​
Best Practices

Preserve Quasar Styles: Always set preserveStyles: true in your boot file configuration to ensure Quasar component styles (like q-card, q-btn, etc.) are included in the print output.

​
Custom Method Name

Using a Quasar-specific method name helps avoid conflicts: 
globalMethodName: '$qPrint' // or '$quasarPrint'

​
Hiding Non-Printable Elements

Use Quasar’s responsive utilities or custom print styles: 
<template>
  <div>
    <div id="content">Printable content</div>
    <q-btn class="no-print" @click="$print('content')">Print</q-btn>
  </div>
</template>

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

​
Working with Quasar Tables

When printing tables, hide pagination and other interactive elements: 
print('table-container', {
  styles: [
    '@media print {',
    '  .q-table__bottom { display: none; }',
    '  .q-table__top { display: none; }',
    '  .q-table { border: 1px solid #000; }',
    '}'
  ]
})

​
Troubleshooting

​
Styles Not Appearing

Ensure preserveStyles: true is set in your boot file configuration and that Quasar’s styles are properly loaded.

​
Boot File Not Loading

Verify that the boot file is registered in quasar.conf.js under the boot array. Adjust the specs option to control window behavior: 
specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes']
// or
specs: { width: 1024, height: 768 }

​
Next Steps

Configuration

Learn about all available configuration options

API Reference

Explore the complete API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us