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. |
Terminal component has an input element that can be described with aria-label or aria-labelledby props. The element that lists the previous commands has aria-live so that changes are received by the screen reader.
| Key | Function |
|---|---|
| tab | Moves focus through the input element. |
| enter | Executes the command when focus in on the input element. |
None.