{"id":24975497,"url":"https://github.com/motla/vue-serial","last_synced_at":"2025-04-11T12:06:54.986Z","repository":{"id":215104779,"uuid":"738145093","full_name":"motla/vue-serial","owner":"motla","description":"📟 Web Serial for Vue.js","archived":false,"fork":false,"pushed_at":"2024-01-04T14:30:53.000Z","size":2200,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T08:22:47.600Z","etag":null,"topics":["ftdi","rs-232","serial","uart","usart","usb","vue","vuejs","web","webserial"],"latest_commit_sha":null,"homepage":"https://motla.github.io/vue-serial/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/motla.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-02T14:32:28.000Z","updated_at":"2025-03-13T09:43:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"d6aa5214-988c-4fd4-a1d7-70f90acdec7a","html_url":"https://github.com/motla/vue-serial","commit_stats":null,"previous_names":["motla/vue-serial"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-serial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-serial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-serial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-serial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/motla","download_url":"https://codeload.github.com/motla/vue-serial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248396410,"owners_count":21096932,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ftdi","rs-232","serial","uart","usart","usb","vue","vuejs","web","webserial"],"created_at":"2025-02-03T21:00:10.383Z","updated_at":"2025-04-11T12:06:54.960Z","avatar_url":"https://github.com/motla.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📟 Web Serial for Vue.js\n\n## Features\n### :rocket: [See live demo](https://motla.github.io/vue-serial/)\n- Easy-to-use event-based API\n- States, signals and configuration variables are Vue.js reactive\n- Can poll CTS, DCD, DSR, and RI signals\n- Serial configuration is stored in the browser localStorage\n\n## Requirements\n- Your website must be served with HTTPS\n- [The client browser must support Web Serial API](https://caniuse.com/web-serial)\n- The `connect()` function must be called from a DOM event\n\n###### :speech_balloon: To setup HTTPS quickly for development with Vite.js, you can use [@vitejs/plugin-basic-ssl](https://github.com/vitejs/vite-plugin-basic-ssl)\n\n## Installation\n##### In your Vue.js project:\n\n```\nnpm install vue-serial\n```\n\n###### :speech_balloon: If you prefer static files, import assets from the `dist` folder.\n\n## Examples\n###### MyComponent.vue (using Composition API)\n```Vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"font-family: sans-serif\"\u003e\n    \u003cdiv v-if=\"!serial.isAvailable\"\u003eWeb Serial is not available. Check that this browser supports Web Serial API and this page is served with HTTPS.\u003c/div\u003e\n    \u003cdiv v-else\u003e\n      \u003cdiv\u003evue-serial: {{ serial.isOpen ? \"is open (device is \" + (serial.isConnected ? \"connected)\" : \"disconnected)\") : \"is closed\" }}\u003c/div\u003e\n      \u003cdiv v-if=\"serial.isOpen\"\u003e\u003cinput ref=\"input\"\u003e\u003cbutton :disabled=\"!serial.isConnected\" @click=\"user_send\"\u003eSend to device\u003c/button\u003e\u003c/div\u003e\n      \u003cdiv\u003e\u003cbutton :disabled=\"serial.isClosing\" @click=\"user_connect\"\u003e{{ !serial.isOpen ? \"Connect to a device...\" : \"Close connection\" }}\u003c/button\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n// In this example we use the Vue3 \"Composition API\" but it works with the \"Option API\" as well.\nimport { ref, watch } from 'vue'\nimport VueSerial from 'vue-serial'\n\nconst input = ref(null); // input will contain the `\u003cinput ref=\"input\"\u003e` element\n\n// Configure the serial settings\nconst serial = new VueSerial();\nserial.baudRate = 115200;\nserial.dataBits = 8;\nserial.stopBits = 1;\nserial.parity = \"none\";\nserial.bufferSize = 255; // set to 1 to receive byte-per-byte\nserial.flowControl = \"none\";\n\n// Function to ask the user to select which serial device to connect\nasync function user_connect () {\n  if(serial.isOpen) await serial.close(); // in your application, encapsulate in a try/catch to manage errors\n  else {\n    await serial.connect(); // can be `serial.connect([{ usbVendorId:1027 }])` to show only FTDI devices\n    if(serial.isOpen) {\n      serial.startSignalsPolling(); // (optional) to listen for CTS, DCD, DSR, and RI signal events\n      // await serial.write(...); // to send bytes to device automatically after connection\n    }\n  }\n}\n\n// Function to send the value contained in the input\nasync function user_send () {\n  const input_elt = input.value; // refers to \u003cinput ref=\"input\"\u003e\n  const value = input_elt.value;\n  await serial.write(value); // in your application, encapsulate in a try/catch to manage errors\n  console.log(\"bytes sent:\", value);\n}\n\n// This will watch for incoming data\nserial.addEventListener(\"read\", ({ value }) =\u003e { console.log(\"bytes read:\", value); });\n\n// This will watch for CTS input signal changes (startSignalsPolling must have been called)\nwatch(() =\u003e serial.clearToSend, (value) =\u003e { console.log(\"CTS signal:\", value); });\n\n\u003c/script\u003e\n```\n\u003cdetails\u003e\n\u003csummary\u003e\u003csmall\u003esame example using static files loaded with a CDN (using \u003cstrong\u003eOptions API\u003c/strong\u003e)\u003c/small\u003e\u003c/summary\u003e\n\n```HTML\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-serial/dist/vue-serial.umd.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdiv style=\"font-family: sans-serif\"\u003e\n      \u003cdiv v-if=\"!serial.isAvailable\"\u003eWeb Serial is not available. Check that this browser supports Web Serial API and this page is served with HTTPS.\u003c/div\u003e\n      \u003cdiv v-else\u003e\n        \u003cdiv\u003evue-serial: {{ serial.isOpen ? \"is open (device is \" + (serial.isConnected ? \"connected)\" : \"disconnected)\") : \"is closed\" }}\u003c/div\u003e\n        \u003cdiv v-if=\"serial.isOpen\"\u003e\u003cinput ref=\"input\"\u003e\u003cbutton :disabled=\"!serial.isConnected\" @click=\"user_send\"\u003eSend to device\u003c/button\u003e\u003c/div\u003e\n        \u003cdiv\u003e\u003cbutton :disabled=\"serial.isClosing\" @click=\"user_connect\"\u003e{{ !serial.isOpen ? \"Connect to a device...\" : \"Close connection\" }}\u003c/button\u003e\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cscript\u003e\n  const app = Vue.createApp({\n    data () {\n      return {\n        serial: new VueSerial()\n      }\n    },\n    mounted () {\n      // Configure the serial settings\n      this.serial.baudRate = 115200;\n      this.serial.dataBits = 8;\n      this.serial.stopBits = 1;\n      this.serial.parity = \"none\";\n      this.serial.bufferSize = 255; // set to 1 to receive byte-per-byte\n      this.serial.flowControl = \"none\";\n      // This will watch for incoming data\n      this.serial.addEventListener(\"read\", ({ value }) =\u003e { console.log(\"bytes read:\", value); });\n    },\n    methods: {\n      async user_connect () { // Function to ask the user to select which serial device to connect\n        if(this.serial.isOpen) await this.serial.close(); // in your application, encapsulate in a try/catch to manage errors\n        else {\n          await this.serial.connect(); // can be `serial.connect([{ usbVendorId:1027 }])` to show only FTDI devices\n          if(this.serial.isOpen) {\n            this.serial.startSignalsPolling(); // (optional) to listen for CTS, DCD, DSR, and RI signal events\n            // await serial.write(...); // to send bytes to device automatically after connection\n          }\n        }\n      },\n      async user_send () { // Function to send the value contained in the input\n        const input_elt = this.$refs.input; // refers to \u003cinput ref=\"input\"\u003e\n        const value = input_elt.value;\n        await this.serial.write(value); // in your application, encapsulate in a try/catch to manage errors\n        console.log(\"bytes sent:\", value);\n      }\n    },\n    watch: {\n      // This will watch for CTS input signal changes (startSignalsPolling must have been called)\n      \"serial.clearToSend\": (value) =\u003e { console.log(\"CTS signal:\", value); }\n    }\n  }).mount('#app');\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003c/details\u003e\n\n## Docs\n[:book: Read the API](./api/default.md)\n\n## Project development\n- `npm run dev` compiles, serves and hot-reloads demo for development\n- `npm run build:demo` compiles and minifies demo\n- `npm run build:lib` compiles and minifies library\n- `npm run typedoc` compiles API documentation\n\n## Licensing\nCopyright (c) 2024 Romain Lamothe, [MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmotla%2Fvue-serial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmotla%2Fvue-serial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmotla%2Fvue-serial/lists"}