vue-webshell v0.1.1

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

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" />