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,880
questions
115
votes
9
answers
84k
views
How can I 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,671
80
votes
5
answers
52k
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,848
65
votes
13
answers
29k
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,678
55
votes
4
answers
52k
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,917
51
votes
8
answers
44k
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 ...
- 36.3k
51
votes
4
answers
22k
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 ...
- 700
49
votes
1
answer
215k
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,260
47
votes
4
answers
26k
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.
- 950
46
votes
9
answers
17k
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' ...
- 916
45
votes
12
answers
108k
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/...
- 17.1k
43
votes
5
answers
81k
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 ...
- 531
41
votes
6
answers
51k
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,755
41
votes
8
answers
27k
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/...
- 732
40
votes
7
answers
24k
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,109
36
votes
5
answers
30k
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,720
35
votes
2
answers
11k
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,378
35
votes
7
answers
17k
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,394
35
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,604
35
votes
2
answers
13k
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,638
34
votes
3
answers
20k
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 ...
- 343
34
votes
4
answers
47k
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 ...
- 74.2k
34
votes
4
answers
44k
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 ...
- 351
34
votes
8
answers
59k
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 ...
- 3,009
32
votes
6
answers
53k
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!
- 641
32
votes
4
answers
33k
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 ...
- 423
31
votes
2
answers
13k
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.9k
31
votes
4
answers
32k
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,957
31
votes
5
answers
15k
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,401
30
votes
6
answers
17k
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 ...
- 360
29
votes
6
answers
11k
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; }...
- 679
29
votes
4
answers
20k
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 ...
- 117k
29
votes
5
answers
26k
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
28
votes
1
answer
18k
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,381
28
votes
5
answers
16k
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,394
27
votes
3
answers
26k
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 ...
- 950
27
votes
7
answers
34k
views
You installed esbuild on another platform than the one you're currently using
I am trying to containerise Svelte js app inside a docker container and I am getting this error on the log complaining about esbuild in a different platform , I am using M1 mac, I have tried to ...
- 2,965
27
votes
7
answers
54k
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,338
27
votes
2
answers
21k
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,376
27
votes
2
answers
22k
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 ...
- 281
27
votes
0
answers
10k
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)
...
- 25.9k
26
votes
5
answers
24k
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.8k
26
votes
1
answer
17k
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 ...
- 485
26
votes
2
answers
13k
views
How to change page title dynamically in Sveltekit?
I'm learning SvelteKit and this might be a very elementary question. But I could not figure out how to change the tab's title.
In my src/+layout.svelte I have:
<script>
let title=&...
- 949
26
votes
1
answer
14k
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() ...
- 493
25
votes
2
answers
15k
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,114
24
votes
3
answers
50k
views
How to redirect to page in SvelteKit?
I have a page with content rendered from a SvelteKit store. If the store is invalid, a user needs do be redirected to the homepage. Unfortunately, I can't find a way to redirect a user even without ...
- 340
24
votes
3
answers
36k
views
How to set vite (preview) production port?
I have been looking arround on how to set a production port for vite but I can't find way
I have tried this vite js config
server: {
host: true,
},
preview:{
port:5005
}
but it seems ...
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 ...
- 476
24
votes
3
answers
9k
views
How to set dynamic html tag according to props in Svelte
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 ...
- 1,528
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,119