All Projects → HalasProject → vue-shell

HalasProject / vue-shell

Licence: MIT license
Component VueJS to simulate a terminal.

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to vue-shell

vue-link
One component to link them all 🔗
Stars: ✭ 65 (+80.56%)
Mutual labels:  vue-plugin
vue-cli-plugin-chrome-ext
vue cli plugin that setup vue project for chrome extension
Stars: ✭ 86 (+138.89%)
Mutual labels:  vue-plugin
vuejs-emoji
vue2.x emoji plugin, autoload fontawesome
Stars: ✭ 32 (-11.11%)
Mutual labels:  vue-plugin
vue-translator
A deadly simple i18n translate plugin for Vue, ready for Server Side Rendering.
Stars: ✭ 18 (-50%)
Mutual labels:  vue-plugin
xontrib-prompt-bar
The bar prompt for xonsh shell with customizable sections and Starship support.
Stars: ✭ 27 (-25%)
Mutual labels:  cmd
X-Browser-Update-Vue
A Vue.js browser-update plugin
Stars: ✭ 25 (-30.56%)
Mutual labels:  vue-plugin
Backdoor
A backdoor that runs on Linux and Windows
Stars: ✭ 36 (+0%)
Mutual labels:  cmd
Gigrator
Git repos migration tool which supports Github / Gitee / Gitlab / Gitea / Coding / Gogs / 腾讯工蜂.
Stars: ✭ 34 (-5.56%)
Mutual labels:  cmd
TideBot
我的 IRC 机器人,虽然这个 Bot 能让聊天者在 IRC 里玩游戏,但除了游戏,还有其他很多功能。
Stars: ✭ 26 (-27.78%)
Mutual labels:  cmd
Batch-File-examples
🐚 Various batch files (descriptions are in the read me file)
Stars: ✭ 37 (+2.78%)
Mutual labels:  cmd
vue-next-rx
RxJS integration for Vue next
Stars: ✭ 31 (-13.89%)
Mutual labels:  vue-plugin
vcrop
A simple Vue image cropping component.
Stars: ✭ 14 (-61.11%)
Mutual labels:  vue-plugin
comi
ComiGO:Simple, cross-platform manga reader。简单、跨平台的漫画阅读器。シンプルな漫画リーダー。
Stars: ✭ 34 (-5.56%)
Mutual labels:  cmd
vite-plugin-webfont-dl
⚡ Webfont Download Vite Plugin - Make your Vite site load faster
Stars: ✭ 69 (+91.67%)
Mutual labels:  vue-plugin
linux-online-docs
linux-online-docs(鸟哥的Linux 私房菜) 🔥 🚀 🎉 🇨🇳
Stars: ✭ 30 (-16.67%)
Mutual labels:  cmd
TerminalStocks
Pure terminal stock ticker for Windows.
Stars: ✭ 88 (+144.44%)
Mutual labels:  cmd
advanced-react-cli
An npm package which aims to provide a better way to install packages for your react application through an intuitive CLI
Stars: ✭ 12 (-66.67%)
Mutual labels:  cmd
amd-cmd-hot-update-hmr
esl-hot-update: Hot update esl modules(AMD、CMD) when modifed. JS, LESS, tpl, component is all supported!
Stars: ✭ 25 (-30.56%)
Mutual labels:  cmd
bot tulis
Pemalas versi desktop. Untuk yang ini tersedia versi CMD dan GUI. Pemalas adalah program untuk mengubah text menjadi tulisan diatas buku dalam bentuk gambar.
Stars: ✭ 43 (+19.44%)
Mutual labels:  cmd
cmd-colors-one-dark
🎨 One Dark color settings for Windows command prompt
Stars: ✭ 28 (-22.22%)
Mutual labels:  cmd

vue-shell

What is this ?

vue-shell is a component vuejs to provides an easy way to create a terminal on your application and then add your own philosophy by adding all the commands you want with their rendering in the output.

  • Navigate the history with key-up | key-down

  • Clean the current terminal with clear

  • Browse all your commands with help

Open in CodeSandBox

Installation

npm i vue-shell --save
import Vue from "vue";
import shell from 'vue-shell'
Vue.use(shell);
<template>
  <v-shell></v-shell>
</template>

Example

<template>
  <div>
    <v-shell
      :banner="banner"
      :shell_input="send_to_terminal"
      :commands="commands"
      @shell_output="prompt"
    ></v-shell>
  </div>
</template>

<script>
export default {
  data() {
    return {
      send_to_terminal: "",
      banner: {
        header: "Vue Shell",
        subHeader: "Shell is power just enjoy 🔥",
        helpHeader: 'Enter "help" for more information.',
        emoji: {
            first: "🔅",
            second: "🔆",
            time: 750
        },
        sign: "VueShell $",
        img: {
            align: "left",
            link: "/mylogo.png",
            width: 100,
            height: 100
        }
      },
      commands: [
        { name: "info",
          desc: "Show information about this terminal",
          get() {
            return `<p>With ❤️ By Salah Bentayeb @halasproject.</p>`;
        }
        },
        {
          name: "uname",
          desc: "Show the current terminal name",
          get() {
            return navigator.appVersion;
          }
        }
      ]
    };
  },
  methods: {
    prompt(value) {
      if (value == "node -v") {
        this.send_to_terminal = process.versions.node;
      }
    }
  }
};
</script>

<style>
</style>

API

Props Type Required
banner Object false
commands Array false
shell_input String false

Event Type Required
shell_output Any false

banner

{
  header: String,
	subHeader: String,
	helpHeader: String,
	sign: String,
	img: {
   		align: "left" | "right",
  		link: String,
    	width: Number,
    	height: Number },
	emoji: {
        first: "🔅",
        second: "🔆",
        time: Number (ms) }
}

commands

[
  { name: String,
    desc: String,
    get() {
       return String | HTML;
    }
  }
]

output

<template>
	<v-shell @shell_output="prompt" :shell_input="send_to_terminal"></v-shell>
</template>

<script>
export default {
	data(){
    	return{
        	send_to_terminal:''
   		}
	},
  	methods:{
  		prompt(val){
  			if (val == "ifconfig"){
            	// Do somthing ... then send the data to shell
            	this.send_to_terminal = data
        	} else {
                // Else send error message in output of shell
				      this.send_to_terminal = `'${val}' is not recognized as an internal command or external, an executable program or a batch file`
        	}
  		}
  	}
}
</script>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].