Questions tagged [svelte]
Svelte is a component framework — like React or Vue. On-topic questions include code using Svelte and how to configure it and use it in your javascript pipelines.
5,391
questions
110
votes
9
answers
71k
views
How to pass parameters to on:click in Svelte?
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 ...
- 5,205
68
votes
4
answers
40k
views
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:
<li v-for="i in 3"><!-- somecontent --></li&...
- 7,165
63
votes
13
answers
26k
views
How to persist svelte store
Is there any direct option to persist svelte store data so that even when the page is refreshed, data will be available.
I am not using local storage since I want the values to be reactive.
- 1,658
49
votes
8
answers
34k
views
Best way to import SVG icons into a Svelte app
I have about 80 custom SVG icons that I'm importing into a Svelte front-end app. Building on https://github.com/sveltejs/template, it's built with Rollup and includes Typescript, Tailwind, and all the ...
- 35.9k
48
votes
1
answer
212k
views
Cannot access 'variable_name' before initialization
When using reactive variables by declaring them using the $: syntax, you get the following error.
Cannot access 'variable_name' before initialization
Here is the code:
App.svelte
<script>
...
- 1,240
47
votes
4
answers
42k
views
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: ...
- 1,601
46
votes
4
answers
24k
views
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.
- 910
45
votes
4
answers
19k
views
Is it possible to access Svelte store from external js files?
I am wondering if i would be able to access my Svelte store values from a plain .js file.
I am trying to write functions returning a dynamic value based on a store value, to import them in any ...
- 640
42
votes
9
answers
13k
views
error: 'type' attribute cannot be dynamic if input uses two-way binding
I was trying to create an Input component for my project. I want to set type attribute dyamically on input element
But when i set type attribute dynamically on input i get error saying
'type' ...
- 806
39
votes
8
answers
25k
views
Import css in node_modules to svelte
I want to use css framework in my svelte project, in this case it was uikit.
I had install it with yarn add uikit
And of course i have to import the css file, with
@import '../node_modules/uikit/...
- 713
38
votes
5
answers
68k
views
How to use local static images in Svelte
I was following the tutorial (https://svelte.dev/tutorial/dynamic-attributes) to import local image files. But it didn't work. The image was not found in the app.
Where do I need to locate these ...
- 481
38
votes
7
answers
21k
views
How to target a component in svelte with css?
How would I do something like this:
<style>
Nested {
color: blue;
}
</style>
<Nested />
i.e. How do I apply a style to a component from its parent?
- 1,071
36
votes
6
answers
38k
views
Access URL query string in svelte
How should I access the the query string parameters from svelte? I'd like my script to behave differently when "?beta" has been appended to the URL.
My intuitive approach would be to use the ...
- 2,655
34
votes
5
answers
23k
views
In svelte, how to `console.log('yes')` when a variable changed?
let c = 0;
$: console.log(c);
If we want to print the value of c when it is changed, we can write like above.
Because c is used in $ directive literally, so this statement can be reactive to c.
But ...
- 1,600
34
votes
5
answers
5k
views
What is this : sign after a variable JS syntax?
I came across the following valid syntax in JS when looking at svelte library:
$: doubled = 6 * 2;
At first, I thought it was specific for the library, but it works on the Chrome console. What is ...
- 6,366
34
votes
2
answers
9k
views
How to apply styles to slot element in Svelte?
I'd like styles declared in one module to be applied to the slot elements of that module (which get filled in in another file).
Here's a Svelte REPL of the following example:
App.html
<List>
...
- 1,368
34
votes
1
answer
11k
views
Svelte - access child component's method
I have an app that simply hides content Hidden.svelte:
<script>
let shown = false;
function show() {
shown = true;
}
</script>
<svelte:options accessors={true}/&...
- 2,468
33
votes
7
answers
15k
views
How to update an array after splice in Svelte?
I'm learning Svelte, and read in the documentation that arrays need to be reassigned in order for a component or page to update it. For that they devised a more idiomatic solution. Instead of writing:
...
- 1,306
31
votes
3
answers
16k
views
How to focus on newly added inputs in Svelte?
I use #each to display an input for every member of the tasks array. When I click the Add task button, a new element is inserted into the array, so a new input appears in the #each loop.
How do I ...
- 313
31
votes
4
answers
29k
views
ReferenceError: document is not defined in Svelte 3
I'm trying in the <script> to manually document.createElement and then to appendChild an audio every time an eventListener is called to replace it. Everything works fine in the browser, apart a ...
- 2,927
31
votes
9
answers
71k
views
SyntaxError: ambiguous indirect export: default Error when importing my own class
I have written a validation class and want to include it in my VueJS 3 project. Unfortunately I get the following error: SyntaxError: ambiguous indirect export: default
This is my code:
// ..classes/...
- 16.1k
30
votes
6
answers
40k
views
How do you load and use a custom font in Svelte
I know it probably uses @font-face but I dont know where to put my woff files localy to get Svelte to use a custom font. I dont know where to put the @font-face either. Thanks in advance!
- 501
30
votes
2
answers
12k
views
How can I manually compile a svelte component down to the final javascript and css that sapper/svelte produces?
Our company produces an automation framework that is written in svelte/sapper. One feature is that developers can create custom ui widgets, currently using plain js/html/css and our client side api. ...
- 13.8k
30
votes
4
answers
34k
views
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 ...
- 311
28
votes
3
answers
31k
views
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 ...
- 72.5k
28
votes
4
answers
17k
views
How can I export a function from a Svelte component that changes a value in the component?
I have a component called WastedTime.svelte with a value wastedTime. There's also a function to change the value to 50 (in my real code, this does an animation but this is a reduced test case for ...
- 111k
27
votes
4
answers
27k
views
Can I set svelte style css attribute values using variables passed in to a component
I want to create a svelte component that receives the name and path of an image. I want to have the component set the image as the "background-image" using CSS.
I've tried the following which does ...
- 373
27
votes
5
answers
9k
views
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; }...
- 649
27
votes
4
answers
21k
views
svelte event parameter type for typescript
So new to svelte but it is so small it is perfect for a job i am working on.
Went for the typescript option: https://svelte.dev/blog/svelte-and-typescript
How or where can i find the types for custom ...
user1037355
27
votes
7
answers
41k
views
Bundle JS and CSS into single file with Vite
I'm having a devil of a time figuring out how to build a single .js file from Vite in my Svelte project that includes all of the built javascript and CSS from my Svelte projects. By default, Vite ...
- 2,879
27
votes
0
answers
9k
views
Create multiple-page/html using Svelte [closed]
It seems every tutorial or example I found only designed for SPA (Single Page Application), what should be done to generate multiple page/html? (without having to create a project for each page)
...
- 25k
26
votes
7
answers
46k
views
How to trigger/force update a Svelte component
I am trying to get my head around the svelte 3 reactivity thing...
I wanted to force refreshing a UI on a button click. I am using a custom component AsyncFetcher that accepts HTTP post data, and ...
- 3,268
26
votes
1
answer
15k
views
How to print both Object key and value with Each block in Svelte?
I wanted to loop through the sections object and print out the key in h1 and the value in p tag. I'm fine with enclosing this in an array.
<script>
const sections =
{"Title 1":...
- 1,201
25
votes
5
answers
11k
views
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 ...
- 4,250
24
votes
3
answers
18k
views
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
<script>
let name = 'world';
let val = ""
let ...
- 910
24
votes
1
answer
5k
views
config.kit.adapter should be an object with an "adapt" method
I want to use the @sveltejs/adapter-static in my Svelte Kit app (want to turn it into an SPA).
I installed the adapter static with npm i @sveltejs/adapter-static.
The code in the svelte.config.cjs ...
- 466
24
votes
2
answers
20k
views
SSR explained in SvelteKit
I recently started working with Svelte via SvelteKit and I have a few questions about this framework to which I haven't been able to find any direct answers in the source/documentation:
SvelteKit has ...
- 251
24
votes
2
answers
8k
views
Can TypeScript understand Svelte components?
Svelte ultimately outputs native JavaScript classes. So, TypeScript could understand these. However, Svelte components have to first be compiled from their initial .html form. Until then, ...
- 1,079
23
votes
5
answers
22k
views
Cannot find module './App.svelte' or its corresponding type declarations
I have a setup that integrates electron with svelte along with typescript support.
when I run the rollup script to compile svelte app, i am getting cannot find module ./App.svelte error as shown below....
- 12.4k
23
votes
1
answer
14k
views
How to have a conditional attribute in Svelte 3?
Is there a simpler way to write the following checkbox component:
<script>
export let disabled = false;
</script>
{#if disabled}
<label class="checkbox" disabled>
<input ...
- 453
23
votes
2
answers
12k
views
How to use Svelte store with tree-like nested object?
The Svelte official tutorial employs such complex object in its document for <svelte:self>
let root = [
{
type: 'folder',
name: 'Important work stuff',
files: [
...
- 2,044
23
votes
4
answers
10k
views
Cross-site POST form submissions are forbidden
My sveltekit app has a form which sends a POST request to server. The app is working fine on dev server but when I build and run the app it fails to send the form data via POST request. It shows the ...
- 270
23
votes
4
answers
13k
views
How to disable Svelte warning "Unused CSS selector"
The approach of my graphic designer for formatting our Svelte application is having a systematic set of classes in LESS, importing the appropriate LESS file in the component or page, and then applying ...
- 1,306
22
votes
2
answers
16k
views
How to add a custom 404 page and a different Error page (for other errors) in SvelteKit?
Basically, how to do the ff. in SvelteKit:
Add a custom 404 page first.
Have a different generic Error page that will show a message/description about the error in SvelteKit
- 2,109
22
votes
1
answer
10k
views
What is the difference between set() and update() method in Svelte Store?
I'm new to Svelte Store. Here in svelte tutorial, they used update() method in <Incrementer/> and <Decrementer/> components to update value. But in <Resetter/>, they used set() ...
- 453
21
votes
3
answers
3k
views
How to define a conditional transition in Svelte?
In Svelte we can add transitions with:
<div in:fade={{duration: 150}}>...</div>
It's also possible to have conditional HTML attributes with:
<input disabled={null}>
This doesn't ...
- 10.4k
21
votes
1
answer
5k
views
SvelteKit: How to output build as single HTML file with inlined JS and CSS?
Is it possible to build a SvelteKit project to a single output HTML file which inlines all JS and CSS? Could SvelteKit be configured to support this output format or do I need to use an external build ...
- 335
20
votes
4
answers
14k
views
How to disable field conditionally in Svelte?
In Angular 2+ (for example), I can use this syntax to disable a field conditionally:
<input [disabled]="booleanCondition" type="text">
In Svelte I'm trying to do as follows, ...
- 2,455
20
votes
2
answers
28k
views
Svelte: Is there a way to make global css variables in scope of svelte components?
I have set my global.css file which I import in index.js
--root {
--main-color: red;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
index.js
import "./global.css";
import App from "....
- 706
20
votes
2
answers
22k
views
Svelte Hot Reloading Issue
Recently started playing with Svelte using the sveltejs template. Everything is working fine, however when I do any change in the files it doesn't hot reload the changes to the web browser, so I have ...
- 835