{"id":13602824,"url":"https://github.com/ndabAP/vue-command","last_synced_at":"2025-04-11T13:31:28.505Z","repository":{"id":34052571,"uuid":"167682235","full_name":"ndabAP/vue-command","owner":"ndabAP","description":"A fully working, most feature-rich Vue.js terminal emulator. Now with Vue.js 3 support!","archived":false,"fork":false,"pushed_at":"2025-04-07T01:43:01.000Z","size":11339,"stargazers_count":310,"open_issues_count":18,"forks_count":46,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-10T01:59:09.968Z","etag":null,"topics":["bash","cmd","javascript","shell","terminal","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://ndabap.github.io/vue-command","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/ndabAP.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2019-01-26T11:40:20.000Z","updated_at":"2025-02-27T07:47:23.000Z","dependencies_parsed_at":"2023-01-16T22:45:45.489Z","dependency_job_id":"2af4d441-570e-4197-8daf-2620e5695587","html_url":"https://github.com/ndabAP/vue-command","commit_stats":{"total_commits":247,"total_committers":6,"mean_commits":"41.166666666666664","dds":0.6194331983805668,"last_synced_commit":"9f77d1b6802a32bf2f33e6ff2f597c6ce5f1cfe9"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndabAP%2Fvue-command","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndabAP%2Fvue-command/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndabAP%2Fvue-command/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndabAP%2Fvue-command/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ndabAP","download_url":"https://codeload.github.com/ndabAP/vue-command/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166864,"owners_count":21058481,"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":["bash","cmd","javascript","shell","terminal","vue","vuejs"],"created_at":"2024-08-01T18:01:39.115Z","updated_at":"2025-04-11T13:31:28.466Z","avatar_url":"https://github.com/ndabAP.png","language":"Vue","readme":"# vue-command\n\nA fully working, most feature-rich Vue.js terminal emulator. See the\n[demo](https://ndabap.github.io/vue-command/) and check the demo\n[source code](https://github.com/ndabAP/vue-command/blob/master/src/hosted/App.vue).\nNow with Vue.js 3 support!\n\n## Features\n\n- Simple, yet extensible API\n- Supports asynchronous commands\n- Supports fullscreen mode\n- Customize the terminal with slots\n- Provide your own parser (falls back to simple one)\n- Multiline support (with \u003ckbd\u003e\\\\\u003c/kbd\u003e)\n- Autocompletion resolver (with \u003ckbd\u003e↹\u003c/kbd\u003e)\n- Browse history (with \u003ckbd\u003e↑\u003c/kbd\u003e/\u003ckbd\u003e↓\u003c/kbd\u003e)\n- Search history (with \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003er\u003c/kbd\u003e)\n- Provide your own event resolver to support additional keyboard events\n\n## Installation\n\n```bash\n$ npm install vue-command --save\n```\n\n## Usage\n\nLet's start with a dead simple example. We want to send \"Hello world\" to\n`Stdout` when entering `hello-world`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-command :commands=\"commands\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueCommand, { createStdout } from \"vue-command\";\nimport \"vue-command/dist/vue-command.css\";\n\nexport default {\n  components: {\n    VueCommand,\n  },\n\n  data: () =\u003e ({\n    commands: {\n      \"hello-world\": () =\u003e createStdout(\"Hello world\"),\n    },\n  }),\n};\n\u003c/script\u003e\n```\n\nNow a more complex one. Let's assume we want to build the nano editor available\nin many shells.\n\nWe inject `terminal` to make sure the editor is only visible when the terminal\nis in fullscreen mode and also a function called `exit` to tell the terminal\nthat the command has been finished when the user enters\n\u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003ex\u003c/kbd\u003e. Furthermore, we use `setFullscreen` to\nswitch the terminal into fullscreen mode.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv v-show=\"terminal.isFullscreen\"\u003e\n    \u003ctextarea ref=\"nano\" @keyup.ctrl.x.exact=\"exit\"\u003e\nThis is a nano text editor emulator! Press Ctrl + x to leave.\u003c/textarea\n    \u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  inject: [\"exit\", \"setFullscreen\", \"terminal\"],\n\n  created() {\n    this.setFullscreen(true);\n  },\n\n  mounted() {\n    this.$refs.nano.focus();\n  },\n};\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\ndiv,\ntextarea {\n  height: 100%;\n}\n\u003c/style\u003e\n```\n\nNow the command has to return the component.\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-command :commands=\"commands\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueCommand from \"vue-command\";\nimport \"vue-command/dist/vue-command.css\";\nimport NanoEditor from \"@/components/NanoEditor.vue\";\n\nexport default {\n  components: {\n    VueCommand,\n  },\n\n  data: () =\u003e ({\n    commands: {\n      nano: () =\u003e NanoEditor,\n    },\n  }),\n};\n\u003c/script\u003e\n```\n\n## Properties\n\nSome properties can be mutated by the terminal. Therefore, adding the `v-model`\ndirective is required.\n\n| Property             | Description                                 | Type       | Default value             | Required | Two-way binding |\n| -------------------- | ------------------------------------------- | ---------- | ------------------------- | -------- | --------------- |\n| `commands`           | See [Commands](#commands)                   | `Object`   | `{}`                      | No       | No              |\n| `cursor-position`    | Cursor position                             | `Number`   | `0`                       | No       | Yes             |\n| `dispatched-queries` | Non-empty dispatched queries                | `Set`      | `new Set()`               | No       | Yes             |\n| `event-resolver`     | See [Event resolver](#event-resolver)       | `Function` | `newDefaultEventResolver` | No       | No              |\n| `font`               | Terminal font                               | `String`   | `''`                      | No       | No              |\n| `help-text`          | Command help                                | `String`   | `''`                      | No       | Yes             |\n| `help-timeout`       | Command help timeout                        | `Number`   | `3000`                    | No       | No              |\n| `hide-bar`           | Hides the bar                               | `Boolean`  | `false`                   | No       | No              |\n| `hide-buttons`       | Hides the buttons                           | `Boolean`  | `false`                   | No       | No              |\n| `hide-prompt`        | Hides the prompt                            | `Boolean`  | `false`                   | No       | No              |\n| `hide-title`         | Hides the title                             | `Boolean`  | `false`                   | No       | No              |\n| `history`            | Terminal history                            | `Array`    | `[]`                      | No       | Yes             |\n| `history-position`   | Points to the latest dispatched query entry | `Number`   | `0`                       | No       | Yes             |\n| `interpreter`        | See [Interpreter](#interpreter)             | `Function` | `null`                    | No       | No              |\n| `invert`             | Inverts the terminals colors                | `Boolean`  | `false`                   | No       | No              |\n| `is-fullscreen`      | Terminal fullscreen mode                    | `Boolean`  | `false`                   | No       | Yes             |\n| `options-resolver`   | See [Options resolver](#options-resolver)   | `Function` | `null`                    | No       | No              |\n| `parser`             | Query parser                                | `Function` | `defaultParser`           | No       | No              |\n| `prompt`             | Terminal prompt                             | `String`   | `~$`                      | No       | No              |\n| `show-help`          | Show query help                             | `Boolean`  | `false`                   | No       | No              |\n| `title`              | Terminal title                              | `String`   | `~$`                      | No       | No              |\n| `query`              | Terminal query                              | `String`   | `''`                      | No       | Yes             |\n\n### Commands\n\n`commands` must be an object containing key-value pairs where key is the command\nand the value is a function that will be called with the parsed arguments. The\nfunction can return a `Promise` and must return or resolve a Vue.js component.\nTo return strings or a new query, use one of the convenient helper methods.\n\nAny component that is not the query component can inject the context. The\ncontext includes the parsed and raw query as fields.\n\n### Event resolver\n\nIt's possible to provide an array property `eventResolver` which is called when\nthe terminal is mounted. Each event resolver will be called with the terminals\nreferences and exposed values.\n\nThe libraries `defaultHistoryEventResolver` makes usage of that and allows to\ncycle through commands with \u003ckbd\u003e↑\u003c/kbd\u003e/\u003ckbd\u003e↓\u003c/kbd\u003e.\n\n### Options resolver\n\nThe terminal provides a built-in autocompletion for the given commands. As soon\nas the query has been autocompleted by the terminal, it's calling the options\nresolver provided as property. The resolver is called with the program, parsed\nquery and a setter to update the query.\n\n### Interpreter\n\nAn interpreter allows to execute arbitrary code after the query has been\ndispatched and to not rely on missing functionality which includes pipes,\nstreams or running multiple commands in parallel.\n\nThe interpreter is a property function that is called with the unparsed query\nright after the query component calls `dispatch` and terminates it at the same\ntime. After the call, you must use the [properties](#properties) and\n[exposed functions](#exposed) to reach the desired behaviour.\n\n## Slots\n\n### Bar\n\nYou can replace the whole terminal bar with the named slot `bar`. This will\nreplace the whole element, including the action buttons and its assigned CSS\nclasses. Example:\n\n```vue\n\u003cvue-command\u003e\n  \u003ctemplate #bar\u003e\n    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬\n  \u003c/template\u003e\n\u003c/vue-command\u003e\n```\n\n### Buttons\n\nInside the bar, you can customize the buttons. If you use this slot,\n`hideButtons` property has no effect. Example:\n\n```vue\n\u003cvue-command\u003e\n  \u003ctemplate #buttons\u003e\n    \u0026times; \u0026#95; \u0026square;\n  \u003c/template\u003e\n\u003c/vue-command\u003e\n```\n\n### Title\n\nInside the bar, you can customize the title. If you use this slot, `hideTitle`\nand `title` property have no effect. Example:\n\n```vue\n\u003cvue-command\u003e\n  \u003ctemplate #title\u003e\n    bash - 720x350\n  \u003c/template\u003e\n\u003c/vue-command\u003e\n```\n\n### Prompt\n\nYou can overwrite the prompt with the prompt slot. If you use this slot,\n`hidePrompt` and `prompt` property have no effect. Example:\n\n```vue\n\u003cvue-command\u003e\n  \u003ctemplate #prompt\u003e\n    ~$\n  \u003c/template\u003e\n\u003c/vue-command\u003e\n```\n\n## Library\n\nLibrary provides helper methods to render terminal related content.\n\n| Function                      | Parameters                                                         | Description                           |\n| ----------------------------- | ------------------------------------------------------------------ | ------------------------------------- |\n| `createCommandNotFound`       | `command, text = 'command not found', name = 'VueCommandNotFound'` | Creates a command not found component |\n| `createStderr`                | `formatterOrText, name = 'VueCommandStderr'`                       | Creates a \"stderr\" component          |\n| `createStdout`                | `formatterOrText, name = 'VueCommandStdout'`                       | Creates a \"stdout\" component          |\n| `createQuery`                 |                                                                    | Creates a query component             |\n| `defaultHistoryEventResolver` | `refs, eventProvider`                                              | The default history event resolver    |\n| `defaultParser`               | `query`                                                            | The default parser                    |\n| `defaultSignalEventResolver`  | `refs, eventProvider`                                              | The default signal event resolver     |\n| `jsonFormatter`               | `value`                                                            | See [Formatters](#formatters)         |\n| `listFormatter`               | `...lis`                                                           | See [Formatters](#formatters)         |\n| `newDefaultEventResolver`     |                                                                    | Returns a new default event resolver  |\n| `newDefaultHistory`           |                                                                    | Returns a new default history         |\n| `tableFormatter`              | `rows`                                                             | See [Formatters](#formatters)         |\n| `textFormatter`               | `text, innerHtml = false`                                          | See [Formatters](#formatters)         |\n\nHelper methods can be imported by name:\n\n```js\nimport { createStdout, createQuery } from \"vue-command\";\n```\n\n### Formatters\n\nThe first argument of `createStdout` can be either a primitive\n(`Boolean`, `Number` or `String`) or a formatter. A formatter formats the\ncontent as a list or table or something else.\n\n| Function         | Parameters                |\n| ---------------- | ------------------------- |\n| `jsonFormatter`  | `value`                   |\n| `listFormatter`  | `...lis`                  |\n| `tableFormatter` | `rows`                    |\n| `textFormatter`  | `text, innerHtml = false` |\n\nFormatters can be imported by name:\n\n```js\nimport { listFormatter } from \"vue-command\";\n```\n\n## Provided\n\n| Identifier           | Type       | Parameters                       |\n| -------------------- | ---------- | -------------------------------- |\n| `addDispatchedQuery` | `Function` | `dispatchedQuery`                |\n| `appendToHistory`    | `Function` | `...components`                  |\n| `dispatch`           | `Function` | `query`                          |\n| `decrementHistory`   | `Function` |                                  |\n| `exit`               | `Function` |                                  |\n| `context`            | `Object`   |                                  |\n| `helpText`           | `String`   |                                  |\n| `helpTimeout`        | `Number`   |                                  |\n| `hidePrompt`         | `Boolean`  |                                  |\n| `incrementHistory`   | `Function` |                                  |\n| `optionsResolver`    | `Function` | `program, parsedQuery, setQuery` |\n| `parser`             | `Function` | `query`                          |\n| `programs`           | `Array`    |                                  |\n| `sendSignal`         | `Function` | `signal`                         |\n| `setCursorPosition`  | `Function` | `cursorPosition`                 |\n| `setFullscreen`      | `Function` | `isFullscreen`                   |\n| `setHistoryPosition` | `Function` | `historyPosition`                |\n| `setQuery`           | `Function` | `query`                          |\n| `showHelp`           | `Boolean`  |                                  |\n| `signals`            | `Object`   |                                  |\n| `slots`              | `Object`   |                                  |\n| `terminal`           | `Object`   |                                  |\n\nProvider can be injected into your component by name:\n\n```js\ninject: [\"exit\", \"terminal\"],\n```\n\n## Exposed\n\n| Identifier           | Type       | Parameters        |\n| -------------------- | ---------- | ----------------- |\n| `addDispatchedQuery` | `Function` | `dispatchedQuery` |\n| `appendToHistory`    | `Function` | `...components`   |\n| `decrementHistory`   | `Function` |                   |\n| `dispatch`           | `Function` | `query`           |\n| `exit`               | `Function` |                   |\n| `incrementHistory`   | `Function` |                   |\n| `programs`           | `Array`    |                   |\n| `sendSignal`         | `Function` | `signal`          |\n| `setCursorPosition`  | `Function` | `cursorPosition`  |\n| `setFullscreen`      | `Function` | `isFullscreen`    |\n| `setHistoryPosition` | `Function` | `historyPosition` |\n| `setQuery`           | `Function` | `query`           |\n| `signals`            | `Object`   |                   |\n| `terminal`           | `Object`   |                   |\n\n## Events\n\n| Name                | Description                        |\n| ------------------- | ---------------------------------- |\n| `closeClicked`      | Emitted on button close click      |\n| `minimizeClicked`   | Emitted on button minimize click   |\n| `fullscreenClicked` | Emitted on button fullscreen click |\n\n## Signals\n\nYou can send and receive signals like `SIGINT`, `SIGTERM` or `SIGKILL`. `SIGINT`\nis the only implemented signal for now. When the user presses\n\u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003ec\u003c/kbd\u003e, you can listen to this event by providing a\nsignal name and a callback:\n\n```js\nconst signals = inject(\"signals\");\nconst sigint = () =\u003e {\n  // Tear down component\n};\nsignals.on(\"SIGINT\", sigint);\n```\n\nTo unsubscribe from the signal, pass the same signal name and callback you used\nto subscribe to the signal.\n\n```js\nsignals.off(\"SIGINT\", sigint);\n```\n\nThe libraries query component makes usage of that and allows to cancel a query\nwith `SIGINT` and appending `^C` to the query.\n\n## Nice-to-haves\n\nThese features didn't make it into the last release. If you would like to\ncontribute please consult `CONTRIBUTING.md`.\n\n- Draggable terminal\n- More events (like query dispatched)\n- More key combinations\n\n## Browser support\n\nThis library uses the `ResizeObserver` to track if the terminal needs to scroll\nto the bottom. You may need a pollyfill to support your target browser.\n\n## Projects using vue-command\n\n- [curvy-idle-game](https://github.com/n4n0GH/curvy-idle-game) - Short idle game\n  where you get to pat her\n- [docker-management-dashboard](https://github.com/zero4994/docker-management-dashboard) - A management dashboard for your local docker containers\n- [saber-theme-klieh](https://github.com/krmax44/saber-theme-klieh) - A Saber\n  theme mimicking a terminal\n- [ts-git](https://github.com/nfriend/ts-git) - A naïve implementation of git,\n  written in TypeScript\n- [Venom](https://github.com/J0LGER/Venom) - Venom is a Command and Control framework\n\n## Chuck Norris API\n\nThe Chuck Norris jokes are comming from [this](https://api.chucknorris.io/) API.\nThis library has no relation to Chuck Norris or the services provided by the\nAPI.\n\n## Author\n\n[Julian Claus](https://www.julian-claus.de) and contributors. Special thanks to\n[krmax44](https://github.com/krmax44) for the amazing work!\n\nI apologize to some contributors that are not in the Git history anymore since I\nhad to delete the repository because of problems with\n[semantic-release](https://github.com/semantic-release/semantic-release).\n\n## License\n\nMIT\n","funding_links":[],"categories":["Components \u0026 Libraries","bash","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Miscellaneous"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FndabAP%2Fvue-command","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FndabAP%2Fvue-command","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FndabAP%2Fvue-command/lists"}