Questions tagged [svelte-3]

Use when referring to Svelte fronted framework version 3.X (which is different and not fully compatible with the versions below).

749 questions
109
votes
9 answers

How to pass parameters to on:click in Svelte?

Binding a function to a button is easy and straightforward: But I don't see a way to pass parameters (arguments) to the function, when I do this:
Félix Paradis
  • 5,165
  • 6
  • 40
  • 49
64
votes
4 answers

Svelte 3 - How to loop each block X amount of times

I'm hoping to find a way to iterate over an #each block a set amount of times in Svelte 3. In Vue I would do something like this:
  • But as I understand Svelte handles loops much differently using the…
    JHeth
    • 7,067
    • 2
    • 23
    • 34
    47
    votes
    4 answers

    How to route programmatically in SvelteKit?

    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(route: string) { router.push(`/${route}`) //…
    Himujjal
    • 1,581
    • 1
    • 14
    • 16
    46
    votes
    4 answers

    How to change the default port 5000 in Svelte?

    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.
    Hypermystic
    • 880
    • 2
    • 11
    • 22
    29
    votes
    4 answers

    SvelteKit: how do I do slug-based dynamic routing?

    I am a newbie on Svelte and in coding in general. I'd prefer to learn SvelteKit (Svelte@Next) rather than sapper since that seems to be where Svelte is heading. For my personal project, I need to support dynamic routing based on url slugs. How do I…
    Johny Chen
    • 301
    • 1
    • 3
    • 3
    28
    votes
    3 answers

    How do get query string parameter in sveltekit?

    I'm trying to the /login?ref=/some/path parameter to redirect to after login: const ref = $page.url.searchParams.get('ref') || '/dashboard'; However I get this error: TypeError: Cannot read properties of undefined (reading 'searchParams')
    chovy
    • 72,281
    • 52
    • 227
    • 295
    27
    votes
    5 answers

    Svelte custom event on svelte typescript

    I'm using clickOutside directive on my svelte-typescript project and I'm getting this error when I assign custom event to the related element Type '{ class: string; onclick_outside: () => boolean; }' is not assignable to type…
    KawishBit
    • 650
    • 1
    • 8
    • 18
    23
    votes
    5 answers

    Further explanation of Svelte's keyed each block

    I don't understand this section in the tutorial: https://svelte.dev/tutorial/keyed-each-blocks. I can see the things array is updated correctly so the right thing.color is passed as expected. But by the first sentence "By default, when you modify…
    Ziyuan
    • 4,215
    • 6
    • 48
    • 77
    23
    votes
    1 answer

    How to have a conditional attribute in Svelte 3?

    Is there a simpler way to write the following checkbox component: {#if disabled} {:else} …
    batisteo
    • 453
    • 1
    • 4
    • 10
    21
    votes
    3 answers

    How to render html in svelte

    I have tried rendering the html by storing the html in a variable but it is not working , I also tried the triple curly braces