vue-print-it

Vue Print It

Vue 3 printing plugin for browser print windows, hidden iframe printing, print-specific CSS, asset readiness, and optional local bridge printing.

Install

npm install vue-print-it

pnpm add vue-print-it

yarn add vue-print-it

Quick Start

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

createApp(App)
  .use(createVuePrintIt({
    preserveStyles: true,
    pageSize: 'A4',
    orientation: 'portrait',
    printCss: '@media print { .no-print { display: none; } }'
  }))
  .mount('#app')

<template>
  <section id="invoice">
    <h1>Invoice</h1>
    <p>This section will be printed.</p>
  </section>

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

Composable

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

const { print } = usePrint()

async function printInvoice() {
  await print('invoice', {
    pageSize: 'A4',
    orientation: 'landscape',
    scale: 0.95
  })
}
</script>

Documentation

The full documentation now lives in the VitePress site under docs/:

• Getting Started
• Print Options
• Browser Printing
• Bridge Printing
• Framework Setup
• API Reference
• Examples

Run the docs locally:

npm run docs:dev

Build the docs:

npm run docs:build

Development

npm ci
npm run typecheck
npm test
npm run build
npm run release:check

License

MIT