Vue Print It

A powerful Vue 3 plugin for printing components and elements with automatic style injection and optional bridge support. Built with TypeScript, designed for modern Vue applications.

Get Started API Reference

Quick start

Get up and running with Vue Print It in just a few steps

Install the package

Install Vue Print It using your preferred package manager:

npm install vue-print-it

Add Vue Print It to your Vue 3 application:

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

const app = createApp(App)

app.use(createVuePrintIt({
  windowTitle: 'Print Document',
  preserveStyles: true,
  autoClose: true,
  timeout: 1000
}))

app.mount('#app')

Use in your components

Start printing content using the global method or composable:

Global Method
Composable

<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>

<script setup>
import { usePrint } from 'vue-print-it'

const { print } = usePrint()

function handlePrint() {
  print('content', {
    windowTitle: 'My Document'
  })
}
</script>

<template>
  <div>
    <div id="content">
      <h1>Hello World!</h1>
      <p>This content will be printed.</p>
    </div>
    
    <button @click="handlePrint">Print</button>
  </div>
</template>

Key features

Everything you need for printing in Vue 3 applications

Composition API

Use the usePrint composable for full TypeScript support and reactive printing

Automatic styles

Preserves your component styles in print output automatically

Event callbacks

Handle before/after print and error events with custom callbacks

TypeScript

Full TypeScript definitions included for type-safe development

Bridge support

Optional bridge for direct printer access without browser dialog

Framework ready

Integrations for Quasar, Nuxt 3, and Nuxt 2

Explore by topic

Deep dive into specific areas of Vue Print It

Core concepts

Understand the plugin system, style injection, and bridge printing architecture

Learn more

Usage guides

Learn different usage patterns, event handling, custom styles, and error handling

View guides

Framework integration

Setup instructions for Quasar, Nuxt 3, and Nuxt 2 frameworks

Integrate now

API reference

Complete API documentation for all functions, composables, and TypeScript types

Explore API

Ready to get started?

Install Vue Print It and add powerful printing capabilities to your Vue 3 application in minutes.

Get Started Now

Get Started

Core Concepts

Usage Guides

Framework Integration

Advanced