vue-command

A fully working, most feature-rich Vue.js terminal emulator. See the demo and check the demo source code.

Features

• Simple, yet extensible API
• Supports asynchronous commands
• Supports fullscreen mode
• Provide your own parser (falls back to simple one)
• Provide your own event resolver
• Autocompletion resolver (with ↹)
• Browse history (with ↑/↓)
• Search history (with Ctrl + r) (comming soon)
• Customize the terminal with slots

Installation

$ npm install vue-command --save

Usage

Let's start with a dead simple example. We want to send "Hello world" to Stdout when entering hello-world.

<template>
  <vue-command :commands="commands" />
</template>

<script>
import VueCommand, { createStdout } from "vue-command";
import "vue-command/dist/vue-command.css";

export default {
  components: {
    VueCommand,
  },

  data: () => ({
    commands: {
      "hello-world": () => createStdout("Hello world"),
    },
  }),
};
</script>

Now a more complex one. Let's assume we want to build the nano editor available in many shells.

We inject terminal to make sure the editor is only visible when the terminal is in fullscreen mode and also a function called exit to tell the terminal that the command has been finished when the user enters Ctrl + x. Furthermore, we use setFullscreen to switch the terminal into fullscreen mode.

<template>
  <div v-show="terminal.isFullscreen">
    <textarea ref="nano" @keyup.ctrl.x.exact="exit">
This is a nano text editor emulator! Press Ctrl + x to leave.</textarea
    >
  </div>
</template>

<script lang="js">
export default {
  inject: ['exit', 'setFullscreen', 'terminal'],

  created () {
    this.setFullscreen(true)
  },

  mounted () {
    this.$refs.nano.focus()
  }
}
</script>

<style scoped>
div,
textarea {
  height: 100%;
}
</style>

Now the command has to return the component.

<template>
  <vue-command :commands="commands" />
</template>

<script>
import VueCommand from "vue-command";
import "vue-command/dist/vue-command.css";
import NanoEditor from "@/components/NanoEditor.vue";

export default {
  components: {
    VueCommand,
  },

  data: () => ({
    commands: {
      nano: () => NanoEditor,
    },
  }),
};
</script>

Properties

Some properties can be changed, therefore, adding the v-model directive is required.

Commands

commands must be an object containing key-value pairs where key is the command and the value is a function that will be called with the parsed arguments. The function can return a Promise and must return or resolve a Vue.js component. To return strings or a new query, use one of the convenient helper methods.

Event resolver

It's possible to provide an array property eventResolver which is called when the terminal is mounted. Each event resolver will be called with the terminals references and exposed values.

The libraries defaultHistoryEventResolver makes usage of that and allows to cycle through commands with ↑/↓.

Options resolver

The terminal provides a built-in autocompletion for the given commands. As soon as the query has been autocompleted by the terminal, it's calling the options resolver provided as property. The resolver is called with the program, parsed query and a setter to update the query.

Slots

Bar

You can customize the terminals bar with the named slot bar. This will replace the whole element, including the action buttons and its assigned CSS classes.

<vue-command :commands="commands">
  <template #bar>&times; &#95; &square;</template>
</vue-command>

Library

Library provides helper methods to render terminal related content.

Helper methods can be imported by name:

import { createStdout, createQuery } from "vue-command";

Formatters

The first argument of createStdout can be either a primitive (boolean, number or string) or a formatter. A formatter formats the content as a list or table or something else.

Formatters can be imported by name:

import { listFormatter } from "vue-command";

Provided

Provider can be injected into your component by name:

inject: ["exit", "terminal"],

Exposed

Events

Nice-to-haves

These features didn't make it into the last release. If you would like to contribute please consult CONTRIBUTING.md.

• Draggable terminal
• More events (like query dispatched)
• More terminal slots
• Multi-line queries
• Syntax highlighting

Browser support

This library uses the ResizeObserver to track if the terminals height changes. You may need a pollyfill to support your target browser.

Projects using vue-command

• curvy-idle-game - Short idle game where you get to pat her
• docker-management-dashboard - A management dashboard for your local docker containers
• saber-theme-klieh - A Saber theme mimicking a terminal
• ts-git - A naïve implementation of git, written in TypeScript
• Venom - Venom is a Command and Control framework

Chuck Norris API

The Chuck Norris jokes are comming from this API. This library has no relation to Chuck Norris or the services provided by the API.

Author

Julian Claus and contributors. Special thanks to krmax44 for the amazing work!

I apologize to some contributors that are not in the Git history anymore since I had to delete the repository because of problems with semantic-release.

License

MIT