connect() function must be called from a DOM eventnpm install vue-serial
dist folder.<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>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-serial/dist/vue-serial.umd.js"></script>
</head>
<body>
<div id="app">
<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>
</div>
<script>
const app = Vue.createApp({
data () {
return {
serial: new VueSerial()
}
},
mounted () {
// Configure the serial settings
this.serial.baudRate = 115200;
this.serial.dataBits = 8;
this.serial.stopBits = 1;
this.serial.parity = "none";
this.serial.bufferSize = 255; // set to 1 to receive byte-per-byte
this.serial.flowControl = "none";
// This will watch for incoming data
this.serial.addEventListener("read", ({ value }) => { console.log("bytes read:", value); });
},
methods: {
async user_connect () { // Function to ask the user to select which serial device to connect
if(this.serial.isOpen) await this.serial.close(); // in your application, encapsulate in a try/catch to manage errors
else {
await this.serial.connect(); // can be `serial.connect([{ usbVendorId:1027 }])` to show only FTDI devices
if(this.serial.isOpen) {
this.serial.startSignalsPolling(); // (optional) to listen for CTS, DCD, DSR, and RI signal events
// await serial.write(...); // to send bytes to device automatically after connection
}
}
},
async user_send () { // Function to send the value contained in the input
const input_elt = this.$refs.input; // refers to <input ref="input">
const value = input_elt.value;
await this.serial.write(value); // in your application, encapsulate in a try/catch to manage errors
console.log("bytes sent:", value);
}
},
watch: {
// This will watch for CTS input signal changes (startSignalsPolling must have been called)
"serial.clearToSend": (value) => { console.log("CTS signal:", value); }
}
}).mount('#app');
</script>
</body>
</html>
npm run dev compiles and hot-reloads demo for developmentnpm run build:demo compiles and minifies demonpm run build:lib compiles and minifies librarynpm run typedoc compiles API documentationCopyright (c) 2024 Romain Lamothe, MIT License
FAQs
Web Serial for Vue.js
We found that vue-serial demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.