I am new to sveltekit and svelte in general, and I am trying to load data from an API to the stores, here is how I am doing it export const load = async ({ fetch }) => { const data = get(dataS...

Is there a way to elegantly and conditionally add and remove use: property in Svelte 3? Example: <script> import {classes} from "./functions.js" export let originalClasses </s...

Doesn't work inline css animation like this: <h1 class="test" style="animation: bg 2s linear infinite">Hello {name}!</h1> <style> .test { background: yellow...

I'm writing an application using Svelte 3.44 and SvelteKit. I want to use Userbase (https://userbase.com/) for user authentication and data storage. I have a component Login.svelte in which I want ...

I love Svelte, but I'm stuck on something basic (though merely cosmetic). The following code should transition between two elements smoothly, but instead it "jumps"--apparently making roo...

I want to use a generic type in a Svelte(Kit) component's props, and I found out there is this type T = $$Generic thing: <script lang="ts"> import type { Writable } from "svel...

I'm new to Svelte. I have 2 Svelte components in an HTML parent-child relationship – as opposed to a Svelte P/C relationship (where 1 Svelte component imports another). Ultimately, I want somethin...

Binding a function to a button is easy and straightforward: <button on:click={handleClick}> Clicks are handled by the handleClick function! </button> But I don't see a way to pass par...

The case is that I'm showing Loading component on fetch request. I use store to set $loading to true and inside conditions is the Loading component. The problem is that the Loading component seems ...

I am not getting how to change the default 5000 port in Svelte to some other port if we install the sample template through degit.

I'm trying to use scss in svelte 3, i've done the steps placed in this post: scss guide in svelte 3 but i keep receiving a syntax error "Colon is expectedsvelte(css-syntax-error)" in code like ...

I want to be able manage history of my SvelteKit app while simultaneously making sure the whole routing system of SvelteKit doesn't get affected in any way. Something like: function routeToPage(rou...

I'm using slot props in a project. I'm having a generic component that takes an Array as input. MyComponent: <script lang="ts"> export let data: Array<any>; </script> ...

I'm creating a Heading component in svelte as a part of learning the basics of this framework. The component behavior is pretty straight-forward. The component will have a prop named level, which...

I have a writable store with following data let array= writable({ skills: [{ id: 1, name: "Wordpress", knowledge: 0.9 }, { id: 2, name: "Js", knowledge: 0.8 } ] }) I want to animat...

I'm iterating over an array of data and I want to do some processing on it before rendering it. I know that I could create a new component and pass array entry to i, and do the processing within th...

Context In my Svelte app, I have multiple pages, each showing one or multiple videos. For rendering the videos I reuse a video component (simplified): // video component <video poster="{sour...

I'm making a simple app based on socket connection. Basically one user is deciding what other users can see. One of functionalities is to start timer for other users. So, there is a Timer component...

I want to use apply to define some css setting on a component, and I also want to be able to overwrite it, like this: <!-- CustomButton.svelte --> <script> let className = ''; export ...

The dev mode using npm run dev, the release mode using npm build How could i know that it's currently built on dev mode or not in the code, for example: <script> import {onMount} from 'svelt...

Summary Context Actual behavior (Problem) Expected behavior Minimal, Testable, Executable Example Data Sources Notes Clues Context I am trying to get a list of JSON objects from the UR...

In a Svelte component, I'm trying to access an object I set up in my rollup config file. My rollup.config.js file looks like this: import replace from '@rollup/plugin-replace'; ... export default ...

So I can't figure a way to pass a variable up in my __layout variable from the component displayed in the <slot>. I tried a few things, using bind: or let: on the slot but it doesn't work. I ...

How do I subscribe to a writable() instance of a class? class User{ public money: Writable<number> = writable(0); public goToJob(){ money.update(prev => prev + 100); } } <script&...

I am learning Svelte by creating simple app. The logic is written using classes. The idea is, that all the data needed comes from class instance properties. Instances should not be instantiated mor...