Skip to main content

​
Overview

The createVuePrintItBridge function creates a Vue plugin that enables direct printer communication through the print bridge service. It provides reactive state management for printers, automatic connection handling, and seamless integration with your Vue application.

​
Import

import { createVuePrintItBridge } from 'vue-print-it'

​
Type Signature

function createVuePrintItBridge(
  options?: BridgePluginOptions
): {
  install(app: App): void
}

​
Parameters

​
options
BridgePluginOptions
default:"{}"
Configuration options for the bridge plugin

​
Returns

Returns a Vue plugin object with an install method. The plugin provides:
  • $printBridge - Enhanced bridge client instance (global property)
  • $printBridgeState - Reactive bridge state (global property)
  • Injection keys for composable access

​
Usage

​
Basic Setup

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

const app = createApp(App)

app.use(createVuePrintItBridge({
  baseUrl: 'http://localhost:8765',
  autoConnect: true,
  autoSelectDefault: true
}))

app.mount('#app')

​
Custom Configuration

app.use(createVuePrintItBridge({
  baseUrl: 'http://192.168.1.100:8765',
  autoConnect: false,
  autoSelectDefault: false,
  defaultPrinter: 'HP LaserJet Pro',
  timeout: 5000,
  retryAttempts: 5,
  debug: true
}))

​
With Multiple Options

app.use(createVuePrintItBridge({
  baseUrl: 'http://localhost:8765',
  autoConnect: true,
  headers: {
    'X-Custom-Header': 'value'
  },
  timeout: 3000
}))

​
Plugin Features

​
Reactive State

The plugin maintains reactive state for:
  • Available printers list
  • Default printer selection
  • Connection status
  • Last update timestamp

​
Auto-Connection

When autoConnect is enabled, the plugin automatically:
  1. Checks bridge availability on installation
  2. Fetches available printers
  3. Selects a default printer if autoSelectDefault is true

​
Default Printer Selection

The plugin follows this priority for default printer selection:
  1. Uses defaultPrinter option if provided
  2. Selects printer marked as default by the system
  3. Fallback to first available printer

​
Global Properties

After installation, the following are available in your components:

​
$printBridge

Access the enhanced bridge client from any component: 
<script setup>
import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()
const bridge = app.appContext.config.globalProperties.$printBridge

await bridge.updatePrinters()
</script>

​
$printBridgeState

Access reactive bridge state: 
<template>
  <div>
    <p>Connected: {{ $printBridgeState.isConnected }}</p>
    <p>Printers: {{ $printBridgeState.availablePrinters.length }}</p>
  </div>
</template>

​
Bridge State Interface

interface BridgeState {
  availablePrinters: BridgePrinter[]
  defaultPrinter: string | null
  isConnected: boolean
  lastUpdated: Date | null
}

​
Enhanced Bridge Client Methods

The plugin enhances the base BridgeClient with additional methods:

​
updatePrinters()

Updates the list of available printers and connection status. 
await bridge.updatePrinters()

​
setDefaultPrinter(printerName)

Sets the default printer by name. 
const success = bridge.setDefaultPrinter('HP LaserJet Pro')

​
getDefaultPrinter()

Gets the current default printer name. 
const printerName = bridge.getDefaultPrinter()

​
getState()

Gets a copy of the current bridge state. 
const state = bridge.getState()
console.log(state.availablePrinters)

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us