Rodney Vg

Rodney Vg

1592200320

Component Vuejs to Simulate a Terminal

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",
          get() {
            return `<p>With ❀️ By Salah Bentayeb @halasproject.</p>`;
        }
        },
        {
          name: "uname",
          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,
    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>

Download Details:

Author: HalasProject

Live Demo: https://codesandbox.io/s/vue-shell-012vo?file=/src/App.vue

GitHub: https://github.com/HalasProject/vue-shell

#vue #javascript #vuejs #vue-js

What is GEEK

Buddha Community

Component Vuejs to Simulate a Terminal

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

Ilaria  Dugg

Ilaria Dugg

1589190180

How to Publish a Vuejs Component on NPM

In this post, I will explain you now how to publish your own VueJs component on npm with a minify and ES5 build.

#vuejs-development #vuejs-2 #vuejs #github #npm

Rodney Vg

Rodney Vg

1592200320

Component Vuejs to Simulate a Terminal

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",
          get() {
            return `<p>With ❀️ By Salah Bentayeb @halasproject.</p>`;
        }
        },
        {
          name: "uname",
          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,
    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>

Download Details:

Author: HalasProject

Live Demo: https://codesandbox.io/s/vue-shell-012vo?file=/src/App.vue

GitHub: https://github.com/HalasProject/vue-shell

#vue #javascript #vuejs #vue-js

Arvel  Parker

Arvel Parker

1591627260

How to Use the Screen Command in Linux

Screen is a terminal program in Linux which allows us to use a virtual (VT100 terminal) as full-screen window manager which multiplexes an open physical terminal between multiple processes, which are typically, interactive shells. It allows us to access multiple terminal sessions within a single terminal or a remote terminal session. It is most useful when addressing multiple Linux shell commands on the command line, as well as separating commands from the shell that started the commands.

Screen also allows a user to initiate a command from one terminal, disconnect from that terminal, and then reconnect from a different location to that same terminal, while using a different terminal without having to restart the command. This simply lets a user better control multiple and separate command windows.

Screen also lets multiple remote computers connect to the same screen session at once. This allows multiple users to connect to the same screen session allowing a second user to follow along with another administrator working on a server.

#tutorials #attach #cli #command line #detach #key bindings #logging #multiplex #multiuser #multiuser mode #remote access #remote management #remote session #remote terminal #screen #screen logging #screen session #screenlog #screens #scrollback #shell #terminal #terminal session #terminal window #tty #vt100

Luna  Mosciski

Luna Mosciski

1599289468

Better Component Composition in VueJS

In VueJS there are few ways to compose components and reuse logic. In this article, I would like to demonstrate a way to boost composition in Vuejs (2.* and 3.*).

I really like the recent proposals regarding the Composition API, but I think that can be part of a broader view.

Below, you can find a component implementing a general use case (a simple data fetching from a remote endpoint and displaying the different transitions and data), though most of the logic is always duplicated along with the template, data, and other variables when the same logic is applied to other places or components.

<template>
<div>
    <div v-if="loading"> Loading... </div>
    <div v-if="error"> An Error occured, please try again</div>
    <div v-if="hasData"> {{ data }} </div>
</div>
</template>

</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                error: false,
                data: {}
            }
        },
        methods: {
            fetchData() {
                this.loading = true;
                setTimeout(() => {
                    this.data = { text: 'example' };
                    this.loading = false;
                }, 4000);
            }
        },
        computed: {
            hasData() {
                return this.data && !!this.data.text;
            }
        },
        mounted() {
            this.fetchData();
        }
    }
</script>

How do we refactor this component and improve it? Let’s go step-by-step and make this component more readable and reusable.

#functional #components #vuejs #jsx #composition #vue