Bridge Plugin Setup

Overview

The Bridge Plugin enables direct printer communication without the browser’s print dialog. It connects to a local service that manages printer communication, allowing you to:

Print directly to specific printers
Get a list of available printers
Check printer status
Send multiple print jobs programmatically
Skip the browser print dialog entirely

Prerequisites

Bridge Service: You need the print bridge service running locally (see Bridge Service Setup)
Local Network: The bridge service must be accessible from your application
Printer Access: The bridge service must have access to system printers

Installation

The bridge plugin is included in the main package:

npm install vue-print-it

Basic Setup

1. Import the Bridge Plugin

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

const app = createApp(App)

// Install main print plugin
app.use(createVuePrintIt({
  windowTitle: 'My App',
  autoClose: true
}))

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

app.mount('#app')

2. Bridge Configuration Options

All available bridge plugin options from src/types.ts:58:

interface BridgePluginOptions {
  /** Base URL of the bridge service (default: 'http://localhost:8765') */
  baseUrl?: string
  
  /** Port number for the bridge service (default: 8765) */
  port?: number
  
  /** Whether to automatically connect on plugin installation (default: false) */
  autoConnect?: boolean
  
  /** Whether to automatically select a default printer (default: true) */
  autoSelectDefault?: boolean
  
  /** Connection timeout in milliseconds (default: 2000) */
  timeout?: number
  
  /** Number of retry attempts for failed connections (default: 3) */
  retryAttempts?: number
  
  /** Default printer name to use (optional - will auto-select if not provided) */
  defaultPrinter?: string
  
  /** Custom headers to send with bridge requests */
  headers?: Record<string, string>
  
  /** Enable debug logging for bridge operations */
  debug?: boolean
}

Server Configuration

Development Setup

For local development with default settings:

app.use(createVuePrintItBridge({
  baseUrl: 'http://localhost:8765',
  autoConnect: true,
  autoSelectDefault: true,
  timeout: 2000,
  debug: true // Enable debug logging
}))

Production Setup

For production with custom server:

app.use(createVuePrintItBridge({
  baseUrl: 'http://print-server.company.local:8765',
  autoConnect: true,
  autoSelectDefault: true,
  timeout: 5000,
  retryAttempts: 5,
  defaultPrinter: 'Office-HP-LaserJet',
  headers: {
    'X-API-Key': 'your-api-key',
    'X-Client-ID': 'your-client-id'
  },
  debug: false
}))

Custom Port Configuration

app.use(createVuePrintItBridge({
  baseUrl: 'http://localhost',
  port: 9000, // Custom port
  autoConnect: true
}))

Using the Bridge Plugin

Method 1: Using usePrintBridge Composable

The usePrintBridge composable provides reactive state and methods (see src/plugins/bridge-plugin.ts:149):

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

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

onMounted(async () => {
  // Check if bridge is connected
  const connected = await checkConnection()
  console.log('Bridge connected:', connected)
  
  // Refresh printer list
  if (connected) {
    await refreshPrinters()
  }
})

const handlePrintClick = async () => {
  if (bridgeState?.isConnected) {
    const printers = bridgeState.availablePrinters
    console.log('Available printers:', printers)
  }
}
</script>

<template>
  <div>
    <p>Bridge Status: {{ bridgeState?.isConnected ? 'Connected' : 'Disconnected' }}</p>
    <p>Default Printer: {{ bridgeState?.defaultPrinter || 'None selected' }}</p>
    <button @click="refreshPrinters">Refresh Printers</button>
  </div>
</template>

Method 2: Using Global Bridge Instance

Access bridge directly from global properties:

<script setup lang="ts">
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const $printBridge = instance?.appContext.config.globalProperties.$printBridge
const $printBridgeState = instance?.appContext.config.globalProperties.$printBridgeState

const checkBridge = async () => {
  const health = await $printBridge.getHealth()
  console.log('Bridge health:', health)
}
</script>

Printer Selection

Automatic Default Printer Selection

With autoSelectDefault: true, the plugin automatically selects a default printer:

app.use(createVuePrintItBridge({
  autoConnect: true,
  autoSelectDefault: true // Automatically selects default printer
}))

Selection logic from src/plugins/bridge-plugin.ts:66:

First tries to find a printer marked as default by the system
Falls back to the first available printer if no default is marked

Manual Printer Selection

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

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

const selectPrinter = (printerName: string) => {
  const success = setDefaultPrinter(printerName)
  if (success) {
    console.log(`Default printer set to: ${printerName}`)
  } else {
    console.warn(`Printer '${printerName}' not found`)
  }
}
</script>

<template>
  <div>
    <h3>Available Printers</h3>
    <ul>
      <li 
        v-for="printer in bridgeState?.availablePrinters" 
        :key="printer.name"
      >
        {{ printer.name }} 
        <span v-if="printer.is_default">[DEFAULT]</span>
        <span>({{ printer.status }})</span>
        <button @click="selectPrinter(printer.name)">Select</button>
      </li>
    </ul>
  </div>
</template>

Specifying Default Printer on Setup

app.use(createVuePrintItBridge({
  defaultPrinter: 'HP LaserJet Pro M404n',
  autoConnect: true
}))

Bridge State Management

The bridge plugin maintains reactive state (see src/plugins/bridge-plugin.ts:9):

interface BridgeState {
  availablePrinters: BridgePrinter[] // List of available printers
  defaultPrinter: string | null      // Currently selected default printer
  isConnected: boolean               // Connection status
  lastUpdated: Date | null           // Last time printers were updated
}

Accessing Bridge State

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

const { bridgeState } = usePrintBridge()

// Watch for connection changes
watch(() => bridgeState?.isConnected, (connected) => {
  if (connected) {
    console.log('Bridge connected')
  } else {
    console.log('Bridge disconnected')
  }
})

// Watch for printer list changes
watch(() => bridgeState?.availablePrinters, (printers) => {
  console.log(`${printers?.length || 0} printers available`)
})
</script>

Printing with Bridge

Using Print Options

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

const { print } = usePrint()

const printWithBridge = async () => {
  await print('invoice', {
    useBridge: true,
    printerName: 'HP LaserJet Pro',
    copies: 2,
    contentType: 'html'
  })
}
</script>

Using Direct Print Method

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

const { printDirect } = usePrint()

const directPrint = async () => {
  const htmlContent = '<h1>Invoice</h1><p>Total: $100</p>'
  
  const response = await printDirect(htmlContent, {
    printer_name: 'HP LaserJet Pro',
    content_type: 'html',
    copies: 1
  })
  
  console.log(`Print job ID: ${response.job_id}`)
}
</script>

Checking Bridge Status

Health Check

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

const { getBridgeStatus } = usePrint()
const bridgeHealth = ref(null)

onMounted(async () => {
  bridgeHealth.value = await getBridgeStatus()
})
</script>

<template>
  <div v-if="bridgeHealth">
    <p>Status: {{ bridgeHealth.status }}</p>
    <p>Version: {{ bridgeHealth.version }}</p>
    <p>Uptime: {{ bridgeHealth.uptime }}s</p>
  </div>
</template>

Getting Available Printers

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

const { getAvailablePrinters } = usePrint()
const printers = ref([])

onMounted(async () => {
  printers.value = await getAvailablePrinters()
})
</script>

<template>
  <ul>
    <li v-for="printer in printers" :key="printer.name">
      {{ printer.name }} - {{ printer.status }}
      <span v-if="printer.is_default">(Default)</span>
    </li>
  </ul>
</template>

Error Handling

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

const { print } = usePrint()
const errorMessage = ref('')

const printWithErrorHandling = async () => {
  try {
    await print('content', {
      useBridge: true,
      printerName: 'HP LaserJet Pro',
      onPrintError: (error) => {
        errorMessage.value = error.message
        console.error('Print error:', error)
      }
    })
  } catch (error) {
    errorMessage.value = 'Failed to connect to bridge service'
    console.error('Bridge error:', error)
  }
}
</script>

<template>
  <div>
    <button @click="printWithErrorHandling">Print</button>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>

Troubleshooting

Bridge Not Connecting

Check if bridge service is running:
```
curl http://localhost:8765/health
```

Enable debug logging:

app.use(createVuePrintItBridge({
  debug: true
}))

Increase timeout and retries:

app.use(createVuePrintItBridge({
  timeout: 5000,
  retryAttempts: 5
}))

No Printers Found

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

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

onMounted(async () => {
  const connected = await checkConnection()
  
  if (connected) {
    await refreshPrinters()
    
    if (bridgeState?.availablePrinters.length === 0) {
      console.warn('No printers found. Check bridge service configuration.')
    }
  } else {
    console.error('Bridge service not available')
  }
})
</script>

Get Started

Core Concepts

Usage Guides

Framework Integration

Advanced

Overview

Prerequisites

Installation

Basic Setup

1. Import the Bridge Plugin

2. Bridge Configuration Options

Server Configuration

Development Setup

Production Setup

Custom Port Configuration

Using the Bridge Plugin

Method 1: Using usePrintBridge Composable

Method 2: Using Global Bridge Instance

Printer Selection

Automatic Default Printer Selection

Manual Printer Selection

Specifying Default Printer on Setup

Bridge State Management

Accessing Bridge State

Printing with Bridge

Using Print Options

Using Direct Print Method

Checking Bridge Status

Health Check

Getting Available Printers

Error Handling

Troubleshooting

Bridge Not Connecting

No Printers Found

Next Steps

TypeScript Support

Configuration

Build docs developers (and LLMs) love

Get Started

Core Concepts

Usage Guides

Framework Integration

Advanced

​Overview

​Prerequisites

​Installation

​Basic Setup

​1. Import the Bridge Plugin

​2. Bridge Configuration Options

​Server Configuration

​Development Setup

​Production Setup

​Custom Port Configuration

​Using the Bridge Plugin

​Method 1: Using usePrintBridge Composable

​Method 2: Using Global Bridge Instance

​Printer Selection

​Automatic Default Printer Selection

​Manual Printer Selection

​Specifying Default Printer on Setup

​Bridge State Management

​Accessing Bridge State

​Printing with Bridge

​Using Print Options

​Using Direct Print Method

​Checking Bridge Status

​Health Check

​Getting Available Printers

​Error Handling

​Troubleshooting

​Bridge Not Connecting

​No Printers Found

​Next Steps

TypeScript Support

Configuration

Build docs developers (and LLMs) love

Overview

Prerequisites

Installation

Basic Setup

1. Import the Bridge Plugin

2. Bridge Configuration Options

Server Configuration

Development Setup

Production Setup

Custom Port Configuration

Using the Bridge Plugin

Method 1: Using usePrintBridge Composable

Method 2: Using Global Bridge Instance

Printer Selection

Automatic Default Printer Selection

Manual Printer Selection

Specifying Default Printer on Setup

Bridge State Management

Accessing Bridge State

Printing with Bridge

Using Print Options

Using Direct Print Method

Checking Bridge Status

Health Check

Getting Available Printers

Error Handling

Troubleshooting

Bridge Not Connecting

No Printers Found

Next Steps