Skip to main content

​
Overview

The usePrintBridge composable provides access to bridge functionality with reactive state management. It automatically connects to the bridge on component mount and provides utility functions for printer management.

​
Import

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

​
Type Signature

function usePrintBridge(): {
  bridgeClient: EnhancedBridgeClient | undefined
  bridgeOptions: BridgePluginOptions | undefined
  bridgeState: BridgeState | undefined
  isAvailable: Ref<boolean | null>
  refreshPrinters: () => Promise<void>
  setDefaultPrinter: (printerName: string) => boolean
  getDefaultPrinter: () => string | null
  checkConnection: () => Promise<boolean>
}

​
Returns

​
bridgeClient
EnhancedBridgeClient | undefined
The enhanced bridge client instance with additional methods
​
bridgeOptions
BridgePluginOptions | undefined
The bridge plugin configuration options
​
bridgeState
BridgeState | undefined
Reactive bridge state containing printers and connection status
interface BridgeState {
  availablePrinters: BridgePrinter[]
  defaultPrinter: string | null
  isConnected: boolean
  lastUpdated: Date | null
}
​
isAvailable
Ref<boolean | null>
Reactive reference indicating if the bridge is available
​
refreshPrinters
() => Promise<void>
Refreshes the list of available printers
​
setDefaultPrinter
(printerName: string) => boolean
Sets the default printer by name. Returns true if successful
​
getDefaultPrinter
() => string | null
Gets the current default printer name
​
checkConnection
() => Promise<boolean>
Checks the bridge connection status. Returns true if connected

​
Usage

​
Basic Usage

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

const { 
  bridgeState, 
  isAvailable, 
  refreshPrinters 
} = usePrintBridge()

// Manually refresh printers
await refreshPrinters()
</script>

<template>
  <div>
    <p>Bridge Available: {{ isAvailable }}</p>
    <p>Connected: {{ bridgeState?.isConnected }}</p>
    <ul>
      <li 
        v-for="printer in bridgeState?.availablePrinters" 
        :key="printer.name"
      >
        {{ printer.name }} 
        <span v-if="printer.is_default">(Default)</span>
      </li>
    </ul>
  </div>
</template>

​
Managing Default Printer

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

const { 
  bridgeState,
  setDefaultPrinter,
  getDefaultPrinter 
} = usePrintBridge()

const changePrinter = (printerName: string) => {
  const success = setDefaultPrinter(printerName)
  
  if (success) {
    console.log(`Default printer changed to: ${printerName}`)
  } else {
    console.error(`Failed to set printer: ${printerName}`)
  }
}

const currentDefault = getDefaultPrinter()
console.log(`Current default: ${currentDefault}`)
</script>

<template>
  <div>
    <h3>Select Printer</h3>
    <button 
      v-for="printer in bridgeState?.availablePrinters"
      :key="printer.name"
      @click="changePrinter(printer.name)"
      :class="{ active: printer.name === bridgeState?.defaultPrinter }"
    >
      {{ printer.name }}
    </button>
  </div>
</template>

​
Checking Connection Status

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

const { checkConnection, isAvailable } = usePrintBridge()
const checking = ref(false)

const testConnection = async () => {
  checking.value = true
  const connected = await checkConnection()
  checking.value = false
  
  if (connected) {
    console.log('Bridge is connected!')
  } else {
    console.error('Bridge is not available')
  }
}
</script>

<template>
  <button @click="testConnection" :disabled="checking">
    {{ checking ? 'Checking...' : 'Test Connection' }}
  </button>
  <p>Status: {{ isAvailable ? 'Connected' : 'Disconnected' }}</p>
</template>

​
Refreshing Printers

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

const { 
  bridgeState, 
  refreshPrinters 
} = usePrintBridge()

const handleRefresh = async () => {
  try {
    await refreshPrinters()
    console.log('Printers refreshed successfully')
  } catch (error) {
    console.error('Failed to refresh printers:', error)
  }
}
</script>

<template>
  <div>
    <button @click="handleRefresh">Refresh Printers</button>
    <p>Last updated: {{ bridgeState?.lastUpdated?.toLocaleString() }}</p>
    <p>Available printers: {{ bridgeState?.availablePrinters.length }}</p>
  </div>
</template>

​
Direct Printing with Bridge

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

const { bridgeClient, bridgeState } = usePrintBridge()
const content = ref('<h1>Test Print</h1>')

const printDirect = async () => {
  if (!bridgeClient) {
    console.error('Bridge not available')
    return
  }
  
  try {
    const response = await bridgeClient.print({
      printer_name: bridgeState?.defaultPrinter || undefined,
      content: bridgeClient.htmlToBase64(content.value),
      content_type: 'html',
      copies: 1
    })
    
    console.log('Print job submitted:', response.job_id)
  } catch (error) {
    console.error('Print failed:', error)
  }
}
</script>

<template>
  <div>
    <textarea v-model="content" />
    <button @click="printDirect">Print Direct</button>
  </div>
</template>

​
Complete Printer Management UI

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

const {
  bridgeState,
  isAvailable,
  refreshPrinters,
  setDefaultPrinter
} = usePrintBridge()

const printers = computed(() => bridgeState?.availablePrinters || [])
const defaultPrinter = computed(() => bridgeState?.defaultPrinter)

const handlePrinterSelect = async (printerName: string) => {
  const success = setDefaultPrinter(printerName)
  if (success) {
    await refreshPrinters()
  }
}
</script>

<template>
  <div class="printer-manager">
    <div class="header">
      <h2>Printer Management</h2>
      <button @click="refreshPrinters">Refresh</button>
    </div>
    
    <div v-if="!isAvailable" class="warning">
      Bridge is not available
    </div>
    
    <div v-else-if="printers.length === 0" class="info">
      No printers found
    </div>
    
    <ul v-else class="printer-list">
      <li 
        v-for="printer in printers" 
        :key="printer.name"
        :class="{ 
          active: printer.name === defaultPrinter,
          default: printer.is_default 
        }"
        @click="handlePrinterSelect(printer.name)"
      >
        <span class="name">{{ printer.name }}</span>
        <span class="status">{{ printer.status }}</span>
        <span v-if="printer.name === defaultPrinter" class="badge">
          Selected
        </span>
      </li>
    </ul>
    
    <div class="footer">
      <p>Last updated: {{ bridgeState?.lastUpdated?.toLocaleString() }}</p>
    </div>
  </div>
</template>

​
Automatic Behavior

​
On Component Mount

The composable automatically:
  1. Checks bridge availability
  2. Updates printer list if connected and list is empty
  3. Sets isAvailable ref based on connection status

​
Reactive Updates

All state is reactive:
  • bridgeState.availablePrinters updates when printers change
  • bridgeState.defaultPrinter updates when default changes
  • bridgeState.isConnected reflects current connection status
  • isAvailable updates after connection checks

​
Error Handling

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

const { refreshPrinters, checkConnection } = usePrintBridge()
const error = ref<string | null>(null)

const safeRefresh = async () => {
  error.value = null
  
  try {
    const connected = await checkConnection()
    if (!connected) {
      error.value = 'Bridge is not available'
      return
    }
    
    await refreshPrinters()
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Unknown error'
  }
}
</script>

​
TypeScript Support

import { usePrintBridge } from 'vue-print-it'
import type { BridgePrinter, BridgeState } from 'vue-print-it'

const { bridgeState } = usePrintBridge()

// Type-safe access
const printers: BridgePrinter[] = bridgeState?.availablePrinters || []
const state: BridgeState | undefined = bridgeState

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us