Animated Terminal Window In Vue – Termynal

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 },

Preview:

Animated Terminal Window In Vue - Termynal

Download Details:

Author: Lehoczky

Live Demo: https://lehoczky.github.io/vue-termynal/examples.html#default-theme

Download Link: https://github.com/Lehoczky/vue-termynal/archive/refs/heads/master.zip

Official Website: https://github.com/Lehoczky/vue-termynal

Install & Download:

# Yarn
$ yarn add @lehoczky/vue-termynal

# NPM
$ npm i @lehoczky/vue-termynal

Add Comment