When we work with Javascript frameworks chances are we need to import external javascript for example importing template built-in js or maybe any legacy external javascript that you need to use on your App
Here are a few ways to import external js on SvelteKit
Using {@html} decorator
For me, it's commonly used to import js template files and put them on +layout.svelte
</div>
...
{@html '<script src="/tabler.min.js"></script>'}
...
</div>
Using svelte head
its mainly used if we want to import external js files and we wanna call a function after these external js loaded to DOM
First let see what our code if we code using vanilla js
// Form
<form id="payment-form">
... your form things
</form>
<script src="https://js.stripe.com/v3/"></script>
// Create a Stripe client.
var stripe = Stripe('ourkeysecret1234567789zzz');
// Create an instance of Elements.
var elements = stripe.elements();
lets convert that to SvelteKit Components.
<script>
import { onMount } from 'svelte';
let stripeReady = false;
let mounted = false;
onMount(() => {
// onMount always call after Components mounted.
mounted = true;
// if stripe altready mounted load stripe element imediately
if (stripeReady) {
loadStripeElements();
}
});
function stripeLoaded() {
// if stripeReady -> load Stripe Element.
stripeReady = true;
if (mounted) {
loadStripeElements();
}
}
function loadStripeElements() {
// create stripe elements
const stripe = tripe('ourkeysecret1234567789zzz');
var elements = stripe.elements();
// etc..
}
}
</script>
<svelte:head>
<script src="https://js.stripe.com/v3/" on:load={stripeLoaded}</script>
</svelte:head>
<div>
<form id="payment-form">
... your form things
</form>
</div>
That is. we successfully added an external (legacy) JS library into our Svelte Components.