Skip to main content
Vue Print It uses Vue 3’s plugin system to provide global printing functionality across your application. This page explains the internal architecture and how the plugin integrates with your Vue app.

​
Overview

The plugin system is built around the createVuePrintIt function, which returns a Vue plugin object that can be installed using app.use(). The plugin registers global methods and integrates seamlessly with Vue’s reactivity system.

​
Plugin Creation

The createVuePrintIt function in plugin.ts:18 creates and configures the plugin: 
export function createVuePrintIt(options: GlobalPrintOptions & { globalMethodName?: string } = {}) {
  return {
    install(app: App) {
      const printFunctions = createPrintFunction(options);
      
      // Allow customizing the global method name
      const methodName = options.globalMethodName || '$print';
      
      // Register the main method and additional methods
      app.config.globalProperties[methodName] = printFunctions.print;
      
      // Only add bridge methods if bridge plugin is installed
      const bridgeClient = app.config.globalProperties.$printBridge;
      if (bridgeClient) {
        app.config.globalProperties[methodName].getBridgeStatus = printFunctions.getBridgeStatus;
        app.config.globalProperties[methodName].getAvailablePrinters = printFunctions.getAvailablePrinters;
        app.config.globalProperties[methodName].printDirect = printFunctions.printDirect;
      }
    }
  };
}

​
Key Features

The plugin accepts global options that apply to all print operations throughout your app:
app.use(createVuePrintIt({
  windowTitle: 'My App Print',
  timeout: 2000,
  autoClose: true,
  preserveStyles: true,
  styles: ['body { font-family: Arial; }']
}))
These options serve as defaults and can be overridden per print operation.
You can customize the global method name using the globalMethodName option:
app.use(createVuePrintIt({
  globalMethodName: '$printDocument'
}))

// Use in component
this.$printDocument('content-id')
By default, the method is named $print.
The plugin automatically detects if the bridge plugin is installed and conditionally adds bridge methods:
const bridgeClient = app.config.globalProperties.$printBridge;
if (bridgeClient) {
  // Add bridge methods only if bridge is available
  app.config.globalProperties[methodName].getBridgeStatus = ...
  app.config.globalProperties[methodName].getAvailablePrinters = ...
  app.config.globalProperties[methodName].printDirect = ...
}
This design ensures the core plugin works independently without requiring the bridge.

​
Global Properties Registration

Vue Print It registers methods on app.config.globalProperties, making them accessible in all component instances: 
// In plugin installation
app.config.globalProperties.$print = printFunctions.print;

// Access in Options API
export default {
  methods: {
    handlePrint() {
      this.$print('content-id')
    }
  }
}

// Access in Composition API
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
instance?.appContext.config.globalProperties.$print('content-id')
The createPrintFunction in usePrint.ts:306 is a factory that creates printing functions with bound global options: 
export function createPrintFunction(globalOptions: Partial<GlobalPrintOptions> = {}) {
  const defaultOptions = {
    name: '_blank',
    specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'],
    styles: [],
    timeout: 1000,
    autoClose: true,
    windowTitle: window.document.title,
    preserveStyles: true
  };

  async function print(element: HTMLElement | string, localOptions = {}) {
    // Combine options: defaults < global < local
    const options = { 
      ...defaultOptions, 
      ...globalOptions, 
      ...localOptions
    };
    
    // Execute print logic
    // ...
  }

  return {
    print,
    getBridgeStatus,
    getAvailablePrinters,
    printDirect
  };
}

​
Options Priority

The plugin implements a three-tier options system:
  1. Default options - Hardcoded sensible defaults
  2. Global options - Set during plugin installation
  3. Local options - Passed to individual print calls
const options = { 
  ...defaultOptions,  // Lowest priority
  ...globalOptions,   // Medium priority
  ...localOptions     // Highest priority
};
This allows flexibility while maintaining consistency across your app.

​
Composable Integration

The usePrint composable provides the same functionality in Composition API: 
export function usePrint() {
  const instance = getCurrentInstance();
  
  if (instance?.appContext.config.globalProperties.$print) {
    // Return global instance if plugin is installed
    return {
      print: instance.appContext.config.globalProperties.$print,
      getBridgeStatus: instance.appContext.config.globalProperties.$print.getBridgeStatus,
      getAvailablePrinters: instance.appContext.config.globalProperties.$print.getAvailablePrinters,
      printDirect: instance.appContext.config.globalProperties.$print.printDirect
    };
  }
  
  // Fallback: create local print function
  const printFunctions = createPrintFunction();
  return printFunctions;
}
The composable intelligently:
  • Uses the global plugin instance if available (ensures shared configuration)
  • Falls back to a local instance if the plugin isn’t installed (useful for testing or standalone usage)

​
Architecture Benefits

Separation of Concerns

The plugin handles global registration while createPrintFunction contains the core printing logic, making the codebase modular and testable.

Progressive Enhancement

The plugin works standalone and automatically enhances itself when the bridge plugin is detected.

Flexible Configuration

Three-tier options system allows global defaults with per-call overrides.

Multiple Access Methods

Accessible via global properties (Options API), composable (Composition API), or direct function calls.

​
Installation Flow

Here’s what happens when you install the plugin:

​
TypeScript Support

The plugin provides full TypeScript support with type definitions: 
import type { GlobalPrintOptions } from 'vue-print-it'

const printOptions: GlobalPrintOptions = {
  windowTitle: 'My App',
  timeout: 2000,
  autoClose: true,
  preserveStyles: true
}

app.use(createVuePrintIt(printOptions))
For global property typing in components: 
// In your types file
import 'vue'
import type { PrintInstance } from 'vue-print-it'

declare module 'vue' {
  interface ComponentCustomProperties {
    $print: PrintInstance['print']
  }
}

​
Next Steps

Style Injection

Learn how styles are preserved during printing

Bridge Printing

Explore direct printer communication

Build docs developers (and LLMs) love

Get started for freeTalk to us