Skip to content
Jakub T. Jankiewicz edited this page Apr 27, 2023 · 5 revisions

Here is an example code on how to use jQuery Terminal in Svelte:

<script>
 import jQuery from 'jquery';
 import { onMount } from 'svelte';
 import terminal from 'jquery.terminal';
 import 'jquery.terminal/css/jquery.terminal.min.css'; // include Terminal CSS

 jQuery.noConflict(); // you don't need to use this
 terminal(window, jQuery); // jQuery Terminal exports the main function that needs to be called with an instance of jQuery
 export let name;
 export const termClass = 'term'; // export class name you can also hardcode the class or id in HTML
 onMount(() => {
     jQuery(($) => {
         $(`.${termClass}`).terminal({
             echo(...args) {
                 this.echo(args.join(' '));
             }
         }, {
             checkArity: false
         });
     });
 });
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
<div class="{termClass}"></div>

<style>
 .terminal {
     width: 600px;
     margin: 0 auto;
     height: 300px;
 }

 h1 {
     color: #ff3e00;
     text-transform: uppercase;
     font-size: 4em;
     font-weight: 100;
 }

 @media (min-width: 640px) {
     main {
         max-width: none;
     }
 }
</style>

Svelte Started with jQuery Terminal

Clone this wiki locally