import Terminal from 'primevue/terminal';
import TerminalService from 'primevue/terminalservice';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/terminal/terminal.min.js"></script>
Commands are processed using an EventBus implementation called TerminalService. Import this service into your component and subscribe to the command event to process the commands by sending replies with the response event.
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />
import TerminalService from 'primevue/terminalservice';
export default {
methods: {
commandHandler(text) {
let response;
let argsIndex = text.indexOf(' ');
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
switch(command) {
case "date":
response = 'Today is ' + new Date().toDateString();
break;
case "greet":
response = 'Hola ' + text.substring(argsIndex + 1);
break;
case "random":
response = Math.floor(Math.random() * 100);
break;
default:
response = "Unknown command: " + command;
}
TerminalService.$emit('response', response);
}
},
mounted() {
TerminalService.$on('command', this.commandHandler);
},
beforeUnmount() {
TerminalService.$off('command', this.commandHandler);
}
}
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| welcomeMessage | string | null | Initial text to display on terminal. |
| prompt | string | null | Prompt text for each command. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-terminal | Container element. |
| p-terminal-content | Content of terminal. |
| p-terminal-prompt | Prompt text. |
| p-terminal-response | Command response. |
| p-terminal-input | Input element to enter commands. |
None.