📟 Web Serial for Vue.js

Features

🚀 See live demo

Requirements

💬 To setup HTTPS quickly for development with Vite.js, you can use @vitejs/plugin-basic-ssl

Installation

In your Vue.js project:

npm install vue-serial

💬 If you prefer static files, import assets from the dist folder.

Examples

MyComponent.vue (using Composition API)

<template>
 <div style="font-family: sans-serif">
 <div v-if="!serial.isAvailable">Web Serial is not available. Check that this browser supports Web Serial API and this page is served with HTTPS.</div>
 <div v-else>
 <div>vue-serial: {{ serial.isOpen ? "is open (device is " + (serial.isConnected ? "connected)" : "disconnected)") : "is closed" }}</div>
 <div v-if="serial.isOpen"><input ref="input"><button :disabled="!serial.isConnected" @click="user_send">Send to device</button></div>
 <div><button :disabled="serial.isClosing" @click="user_connect">{{ !serial.isOpen ? "Connect to a device..." : "Close connection" }}</button></div>
 </div>
 </div>
</template>
<script setup>
// In this example we use the Vue3 "Composition API" but it works with the "Option API" as well.
import { ref, watch } from 'vue'
import VueSerial from 'vue-serial'

const input = ref(null); // input will contain the `<input ref="input">` element

// Configure the serial settings
const serial = new VueSerial();
serial.baudRate = 115200;
serial.dataBits = 8;
serial.stopBits = 1;
serial.parity = "none";
serial.bufferSize = 255; // set to 1 to receive byte-per-byte
serial.flowControl = "none";

// Function to ask the user to select which serial device to connect
async function user_connect () {
 if(serial.isOpen) await serial.close(); // in your application, encapsulate in a try/catch to manage errors
 else {
 await serial.connect(); // can be `serial.connect([{ usbVendorId:1027 }])` to show only FTDI devices
 if(serial.isOpen) {
 serial.startSignalsPolling(); // (optional) to listen for CTS, DCD, DSR, and RI signal events
 // await serial.write(...); // to send bytes to device automatically after connection
 }
 }
}

// Function to send the value contained in the input
async function user_send () {
 const input_elt = input.value; // refers to <input ref="input">
 const value = input_elt.value;
 await serial.write(value); // in your application, encapsulate in a try/catch to manage errors
 console.log("bytes sent:", value);
}

// This will watch for incoming data
serial.addEventListener("read", ({ value }) => { console.log("bytes read:", value); });

// This will watch for CTS input signal changes (startSignalsPolling must have been called)
watch(() => serial.clearToSend, (value) => { console.log("CTS signal:", value); });

</script>

Docs

Project development

Licensing