vue-webshell

A webshell vue.

• Report bugs: https://github.com/pauloklaus/vue-webshell/issues
• Live test: https://pauloklaus.com.br/webshell

Install

Create a new vue project:

vue create

Install component and dependencies:

npm install --save vue-webshell

Environment setting

Make a src/resources folder at the root:

mkdir src/resources

Configure the vue-webshell

Create the src/resources/vue-webshell.js:

import Vue from "vue";
import VueWebshell from "vue-webshell";
import "vue-webshell/dist/VueWebshell.css";

Vue.use(VueWebshell, { VueWebshellName: "MyWebshell" });

Import vue-webshell

The "src/main.js" file should look like this:

import Vue from "vue";
import App from "./App.vue";

import "./resources/vue-webshell";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount("#app");

How to use (example in App.vue)

<template>
  <div>
    <my-webshell
      title="my-webshell"
      twitterProfile="myTwitterUsername"
    />
  </div>
</template>

<style>
.webshell-prompt {
  color: green;
}
.webshell-input {
  color: green;
  background-color: black;
  border: 1px solid black;
}
.webshell-input:focus {
  outline: 1px solid black;
}
</style>

Properties

Property | Description | Required | Default -|-|-|- projectUrl | Project source code repository url | no | - title | Title to show on boot of webshell | no | vue-webshell promptSignal | The prompt signal | no | $ queryIpUrl | Url to fetch your external ip address | no | - dockerhubProfile | Your docker hub profile username | no | - githubProfile | Your github profile username | no | - linkedinProfile | Your linkedin profile username | no | - npmjsProfile | Your npmjs profile username | no | - twitterProfile | Your twitter profile username | no | -

The component uses the following CSS classes:

.webshell-container .webshell-screen .webshell-command .webshell-prompt .webshell-input .text-light .text-warning .text-danger .text-link .text-inverse

Using in the browser

To use directly in the browser, import bootstrap-vue before vue-webshell:

<script src="https://unpkg.com/vue-webshell" />