Animated Terminal Window In Vue - Termynal

Install & Download:

# Yarn
$ yarn add @lehoczky/vue-termynal
# NPM
$ npm i @lehoczky/vue-termynal

Description:

Termynal is a Vue component to create a customizable, animated, modern terminal emulator in your app.

How to use it:

1. Import the Termynal component.

import App from "./App.vue"
import VueTermynalPlugin from "@lehoczky/vue-termynal"
createApp(App).use(VueTermynalPlugin).mount("#app")

import { VTermynal, VtInput, VtProgress, VtText, VtSpinner } from "@lehoczky/vue-termynal"
export default defineComponent({
  components: { VTermynal, VtInput, VtProgress, VtText, VtSpinner },
})

2. Create a basic terminal window.

<v-termynal>
  <vt-input>Input</vt-input>
  <vt-progress />
  <vt-text>Success Text</vt-text>
</v-termynal>

3. Available component props.

/** Delay before animation, in ms. */
startDelay: { type: Number, default: 600, required: false },
/** Delay between each typed character, in ms. */
typeDelay: { type: Number, default: 90, required: false },
/** Delay between each line, in ms. */
lineDelay: { type: Number, default: 1500, required: false },
/** Number of characters displayed as progress bar. */
progressLength: { type: Number, default: 40, required: false },
/** Character to use for progress bar, defaults to █. */
progressChar: { type: String, default: "█", required: false },
/** Max percent of progress. */
progressPercent: { type: Number, default: 100, required: false },
/** Delay between each progress character, in ms. */
progressDelay: { type: Number, default: 90, required: false },
/** Type of each spinner, defaults to `dots`. */
spinnerType: {
  type: String,
  default: "dots",
  required: false,
  validator: spinnerTypeValidator,
},
/** Delay between each spinner frame, in ms. */
spinnerFrameDelay: { type: Number, default: 80, required: false },
/** Seconds to wait before finishing each spinner's animation. */
spinnerDuration: { type: Number, default: 1.5, required: false },
/** Character to use for cursor, defaults to ▋. */
cursor: { type: String, default: "▋", required: false },
/** Only start the animation when the terminal enters the viewport. */
lazy: { type: Boolean, default: false, required: false },
/** Whether to a show the fast forward button. */
forwardButton: { type: Boolean, default: false, required: false },
/** Whether to a show the restart button. */
restartButton: { type: Boolean, default: false, required: false },

4. Input component props.

lineDelay: { type: Number, default: null, required: false },
typeDelay: { type: Number, default: null, required: false },
prompt: { type: String, default: null, required: false },

5. Progress component props.

lineDelay: { type: Number, default: null, required: false },
progressLength: { type: Number, default: null, required: false },
progressChar: { type: String, default: null, required: false },
progressPercent: { type: Number, default: null, required: false },
progressDelay: { type: Number, default: null, required: false },
prefix: { type: String, default: null, required: false },

6. Spinner component props.

lineDelay: { type: Number, default: null, required: false },
type: {
  type: String,
  default: null,
  required: false,
  validator: spinnerTypeValidator,
},
frameDelay: { type: Number, default: null, required: false },
duration: { type: Number, default: null, required: false },
prefix: { type: String, default: null, required: false },