{"id":32226355,"url":"https://github.com/martywallace/vue-keyboard","last_synced_at":"2026-02-19T23:02:00.164Z","repository":{"id":44164895,"uuid":"66344322","full_name":"martywallace/vue-keyboard","owner":"martywallace","description":"A simple virtual keyboard for Vue.js.","archived":false,"fork":false,"pushed_at":"2022-12-02T15:29:03.000Z","size":472,"stargazers_count":152,"open_issues_count":19,"forks_count":16,"subscribers_count":6,"default_branch":"master","last_synced_at":"2026-01-23T10:48:09.898Z","etag":null,"topics":["javascript","keyboard","keyboard-component","vue","vue-component","vue-keyboard"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/martywallace.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-23T07:31:56.000Z","updated_at":"2025-11-17T22:00:01.000Z","dependencies_parsed_at":"2022-09-04T22:01:29.707Z","dependency_job_id":null,"html_url":"https://github.com/martywallace/vue-keyboard","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/martywallace/vue-keyboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martywallace%2Fvue-keyboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martywallace%2Fvue-keyboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martywallace%2Fvue-keyboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martywallace%2Fvue-keyboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martywallace","download_url":"https://codeload.github.com/martywallace/vue-keyboard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martywallace%2Fvue-keyboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29636040,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T22:32:43.237Z","status":"ssl_error","status_checked_at":"2026-02-19T22:32:38.330Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","keyboard","keyboard-component","vue","vue-component","vue-keyboard"],"created_at":"2025-10-22T09:48:45.767Z","updated_at":"2026-02-19T23:02:00.159Z","avatar_url":"https://github.com/martywallace.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-keyboard\n\nA virtual keyboard for Vue 2.\n\n## Install:\n\n```\n$ npm install --save vue-keyboard\n```\n\n## Resources:\n\n* [Guide](https://blog.martywallace.com/vue-keyboard-usage-guide).\n\n## Usage:\n\n``` vue\n\u003ckeyboard layouts=\"abc123|xyz456|{space:space}\"\u003e\u003c/keyboard\u003e\n```\n\nEach layout accepts a pipe `|` delimited string of characters to use as the keyboard buttons. You can include special function characters with the `{text:action}` syntax, where `text` is the text that will be rendered in the button and `action` is the action within the keyboard component to be called when that button is pressed. The inbuilt actions are:\n\n* `backspace` - Remove one character from the end of the current value.\n* `space` - Insert one whitespace character.\n* `clear` - Clear the entire input value.\n* `goto:n` - Go to a new keyboard layout, replacing `n` with the index of the layout to load.\n\nIf the `action` does not match any of these inbuilt actions, an event will be dispatched by the keyboard component instead, using the action name as the event name. The keyboard component will be provided to the listener as the first argument.\n\n\u003e Note: You can simply use `{action}` which will create a button with no text content. This is useful for things like `space` which you may just want to render as a wide empty button.\n\nYou can use the pipe `|`, open curly brace `{` or close curly brace `}` characters in your keyboard by doubling up, e.g.\n\n``` vue\n\u003ckeyboard layouts=\"||{{}}\"\u003e\u003c/keyboard\u003e\n```\n\nWill output a keyboard with the characters `|{}`.\n\n## Props:\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProp\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003elayouts\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring|string[]\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eOne or more keyboard layouts, explained above.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003emaxlength\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe maximum input length.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003epattern\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eA regex pattern to apply to the keyboard value. If provided, an invalid match will add the \u003ccode\u003einvalid\u003c/code\u003e class to the keyboard component. If not provided or if the value matches, the \u003ccode\u003evalid\u003c/code\u003e class is added.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n## Example:\n\nHere is an example application containing a `keyboard` component:\n\nJavaScript:\n\n``` javascript\nimport Vue from 'vue';\nimport keyboard from 'vue-keyboard';\n\nnew Vue({\n  el: '#app',\n  components: { keyboard },\n\n  data: {\n    input: '',\n  },\n\n  methods: {\n    changed(value) {\n      console.log('Value ' + value);\n    },\n\n    custom(keyboard) {\n      console.log(keyboard.value);\n    }\n  }\n});\n```\n\nMarkup:\n\n``` vue\n\u003ckeyboard\n  v-model=\"input\"\n  @custom=\"custom\"\n  @input=\"changed\"\n  :layouts=\"[\n    '1234567890{delete:backspace}|qwertyuiop|asdfghjkl|{shift:goto:1}zxcvbnm|{space:space}{custom:custom}',\n    '!@#$%^\u0026*(){delete:backspace}|QWERTYUIOP|ASDFGHJKL|{shift:goto:0}ZXCVBNM|{space:space}{custom:custom}'\n  ]\"\n  :maxlength=\"16\"\n\u003e\u003c/keyboard\u003e\n```\n\nThis keeps the `input` value in the main application in sync with the value of the keyboard, limits that value to 16 characters and triggers the 'custom' function in the main application when the \"custom\" button in the keyboard is clicked.\n\n## License\nvue-keyboard is available under the [MIT license](https://tldrlegal.com/license/mit-license).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartywallace%2Fvue-keyboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartywallace%2Fvue-keyboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartywallace%2Fvue-keyboard/lists"}