I'm trying to use Svelte 5 and SvelteKit inside PHP. I don't understand how to use the Imperative component API (https://svelte.dev/docs/svelte/imperative-component-api). Where do I put the following code? Do I put it in src/routes/main.js? import { mount } from 'svelte';…
I never noticed this before, but I've encountered a weird issue in my Sveltekit application. To put it simply, I have a ("/map") sub route that when refreshed/loaded directly as the sub route won't execute any JS, I noticed this…
I'm trying to build a simple front-end with Svelte, where I have a main page with different possible child components. My problem is that I can't get the child component to take up the full height of the page. Here…
I'm using Svelte 5. <a href="my-first-link"> <div> <!-- Some elements --> </div> <a href="my-second-link"> <div> <!-- Some other elements --> </div> </a> <div> <!-- Some elements --> </div> </a> Svelte is throwing a lint error: `<a>` is invalid inside `<a>`svelte(node_invalid_placement)…
I'm trying to dynamically import a Svelte component in my project, but I'm encountering a TypeError when including the file extension in the variable that holds the component name. Here is the working example: const componentName = "MyComponent"; let importedComponent…
I have three static web app services on Azure, each hosting a Svelte application. I am facing the same problem across all of these services. After a 10-15 minute pause in using the application, the first request takes between 6…
I am trying to do the most basic thing in Svelte but I keep failing. I want the button element to trigger the visibillity of the ul-element with classname "this-one". I am stuck in the "vanilla js"-approach and can not…
So I have this SvelteKit application running on a Docker container on my server using node-adapter. I also have a .NET backend running on Docker in the same server. Both applications are proxied by NGINX (config below). I can confirm…
I need to calculate the exact location of a point to be drawn on an image. I noticed that there is some padding around the container in which the image is placed, as shown below: And this is the image…
I wanted to add a simple SVG example that is manipulatable with SVG.js I tried this. <main> <section class="center"> <h1>Hello!</h1> <p>This is project page.</p> </section> <section id="canvas"> <canvas></canvas> </section> </main> <script> import { SVG } from '@svgdotjs/svg.js'; var draw =…