Overview
The BridgePluginOptions interface defines configuration options for the bridge plugin, which enables direct printing to physical printers without the browser’s print dialog. The bridge plugin communicates with a local service that manages printer connections.
Properties
baseUrl
string
default:"http://localhost:8765"
Base URL of the bridge service. Should include protocol and hostname.
Port number for the bridge service. The service must be running on this port.
Whether to automatically connect to the bridge service when the plugin is installed. If false, you must manually call connect() to establish a connection.
Whether to automatically select the system’s default printer when connecting to the bridge. If false, you must explicitly specify a printer for each print job.
Connection timeout in milliseconds. If the bridge service doesn’t respond within this time, the connection attempt will fail.
Number of retry attempts for failed connections. The plugin will retry the connection this many times before giving up.
Default printer name to use for all bridge print operations. If not provided and autoSelectDefault is true, the system default printer will be used.
Custom HTTP headers to send with all bridge requests. Useful for authentication or custom metadata.Example:headers: {
'Authorization': 'Bearer token123',
'X-Client-ID': 'my-app'
}
Enable debug logging for bridge operations. When true, detailed logs will be output to the console for troubleshooting.
Usage Examples
Basic Bridge Configuration
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import VuePrintItBridge from 'vue-print-it-bridge';
import App from './App.vue';
const app = createApp(App);
app.use(VuePrintIt);
app.use(VuePrintItBridge, {
baseUrl: 'http://localhost:8765',
autoConnect: true,
autoSelectDefault: true
});
app.mount('#app');
Custom Port and Timeout
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import VuePrintItBridge from 'vue-print-it-bridge';
import App from './App.vue';
const app = createApp(App);
app.use(VuePrintIt);
app.use(VuePrintItBridge, {
port: 9000,
timeout: 5000,
retryAttempts: 5,
autoConnect: true
});
app.mount('#app');
Specific Default Printer
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import VuePrintItBridge from 'vue-print-it-bridge';
import App from './App.vue';
const app = createApp(App);
app.use(VuePrintIt);
app.use(VuePrintItBridge, {
autoConnect: true,
autoSelectDefault: false,
defaultPrinter: 'HP LaserJet Pro',
timeout: 3000
});
app.mount('#app');
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import VuePrintItBridge from 'vue-print-it-bridge';
import App from './App.vue';
const app = createApp(App);
app.use(VuePrintIt);
app.use(VuePrintItBridge, {
baseUrl: 'http://localhost:8765',
autoConnect: true,
debug: true,
headers: {
'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
'X-App-Version': '1.0.0',
'X-Client-ID': 'pos-terminal-1'
}
});
app.mount('#app');
Production Configuration
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import VuePrintItBridge from 'vue-print-it-bridge';
import App from './App.vue';
const app = createApp(App);
const bridgeConfig = {
baseUrl: import.meta.env.VITE_BRIDGE_URL || 'http://localhost:8765',
port: parseInt(import.meta.env.VITE_BRIDGE_PORT) || 8765,
autoConnect: true,
autoSelectDefault: true,
timeout: 5000,
retryAttempts: 3,
defaultPrinter: import.meta.env.VITE_DEFAULT_PRINTER,
debug: import.meta.env.DEV,
headers: {
'X-App-Version': import.meta.env.VITE_APP_VERSION
}
};
app.use(VuePrintIt);
app.use(VuePrintItBridge, bridgeConfig);
app.mount('#app');
Manual Connection Setup
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import VuePrintItBridge from 'vue-print-it-bridge';
import App from './App.vue';
const app = createApp(App);
app.use(VuePrintIt);
app.use(VuePrintItBridge, {
autoConnect: false, // Don't connect automatically
autoSelectDefault: false,
timeout: 3000,
retryAttempts: 5
});
app.mount('#app');
// Later in your application, connect manually
import { usePrint } from 'vue-print-it';
const { getBridgeStatus } = usePrint();
// Check if bridge is available before connecting
const status = await getBridgeStatus();
if (status) {
console.log('Bridge connected:', status);
}
Remote Bridge Service
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import VuePrintItBridge from 'vue-print-it-bridge';
import App from './App.vue';
const app = createApp(App);
app.use(VuePrintIt);
app.use(VuePrintItBridge, {
baseUrl: 'http://192.168.1.100:8765', // Remote bridge server
autoConnect: true,
timeout: 10000, // Longer timeout for network latency
retryAttempts: 5,
headers: {
'Authorization': 'Bearer remote-access-token'
}
});
app.mount('#app');
TypeScript Usage
import { createApp } from 'vue';
import VuePrintIt from 'vue-print-it';
import VuePrintItBridge, { BridgePluginOptions } from 'vue-print-it-bridge';
import App from './App.vue';
const app = createApp(App);
const bridgeConfig: BridgePluginOptions = {
baseUrl: 'http://localhost:8765',
port: 8765,
autoConnect: true,
autoSelectDefault: true,
timeout: 2000,
retryAttempts: 3,
defaultPrinter: 'Zebra Label Printer',
headers: {
'X-API-Key': 'secret-key'
},
debug: false
};
app.use(VuePrintIt);
app.use(VuePrintItBridge, bridgeConfig);
app.mount('#app');
See Also
