Quantcast
Channel: Active questions tagged svelte - Stack Overflow
↧

How to iterate over an object reactively?

I need to iterate over an object. The object is declared with:const obj = $state({ one: { checked: true }, two: { checked: false }, three: { checked: true } });In my Svelte templating code, I do...

View Article


How do I correctly validate svelte5 props with zod?

I'm new to svelte having previously worked in react and I ran into something that confused me when trying to use zod to ensure proper (runtime) typesafety of my svelte components.My typical approach is...

View Article


Trying to load a custom .glb file but constantly getting an HTML/404 response...

Cannot work out where to put the model.glb file.Error:Error in asyncWritable: Unexpected token '<', "<!doctype "... is not valid JSON.Created the project with - 'npm create...

View Article

Using $env with SvelteKit and Docker

SvelteKit provides a good and easy way to use ENV variables:https://learn.svelte.dev/tutorial/env-static-publicIm using Docker in a CI pipeline to create images. However when running RUN npm run build...

View Article

How to monitor changes to a Svelte writeable?

Currently I have this code:File A.js:import { writable, derived } from "svelte/store";export const notify = writable(false)File B.svelte:import { notify } from '$lib/store';$effect(() => { if...

View Article


@rollup/plugin-typescript TS2307: Cannot find module...

TS FILEimport App from "../xxx/HelloWorld.svelte";const app = new App({ target: document.body,});export default app;TSCONFIG.JSON{"extends": "@tsconfig/svelte/tsconfig.json","include": ["./**/*",...

View Article

My tooltip isn't working on android as getBoundingClientRect is returning 0

I'm implementing a tooltip feature on my page and encountered a specific issue on Android devices. While the tooltips work perfectly on desktop, iOS, and even in resized browser windows, they behave...

View Article

onMount called after function call from parent component

I have the following minimal example:Component A:<script lang="ts"> import {tick} from 'svelte'; import LocationSelector from './LocationSelector.svelte'; let locationSelector: LocationSelector;...

View Article


How to display Portable Text block content images in SvelteKit

I'm trying to render a blog post from Sanity Studio in my SvelteKit project.Currently, all of the text etc is being displayed, but images within the block content aren't. Below is what I have tried so...

View Article


AutoPlay Slides not working for Swiper JS

I am currently working with svelte to create a smooth auto slider using SwiperJs. It seems that I am unable to create that animation.When loading the page, the autoPlay dosen't seem to work.Below is...

View Article

@rollup/plugin-typescript TS2307: Cannot find module or its corresponding...

main.ts fileimport App from "../components/HelloWorld.svelte";const app = new App({ target: document.body, });export default app;rollup.config.json fileimport svelte from "rollup-plugin-svelte";import...

View Article

How to properly wrap a WebComponent in Svelte(kit) 5

I need to use some WebComponents at $JOB inside SvelteKit, built as a SPA.Supposing that <my-web-component> has:API attributes (like disabled, but custom ones)MethodsEventsWhat could be the best...

View Article

Escape Root Layout Svelte Sveltekit

According to the new routing system you can now group routes and have specific layout files in each group. These files inherit for their parent layout files. You can omit this, by using...

View Article


Svelte KaTeX automatic line breaks

I am generating random math expressions and displaying them on a website using Svelte and KaTeX. Sometimes, the generated formula becomes too long for its container, but instead of automatically...

View Article

wails dev Call from terminal unable to find wails.json

I am using a copy of the Wails + Svelte hello world app and I am using it to do a Svelte tutorial.(Tutorial Link)https://svelte.dev/tutorial/svelte/nested-componentsUp until I reached this particular...

View Article


How to handle expired http requests in Svelte?

The way I have it set up is a class that handles all the api calls. In this class I keep a map for GET requests, key is url, value is AbortController.If a request is being sent and another one of the...

View Article

How to handle large number of data coming from back-end, without pagination

Let's say I call an API to fetch some data from the database, based on certain query parameters, and that API queries the database and gets a large number of results, for example 1 million.Whats the...

View Article


Accessing SvelteKit vite local development server from Android phone

I have built a landing page with Sveltekit, and I want to test the website on my Android phone while developing the mobile view, is there any way to do this?Before using Svelte (when I used plain HTML,...

View Article

Svelte multiple small components vs regular html elements

Does it affect performance having svelte components instead of regular HTML elements, for small things like buttons, links etc?Wrapping these elements in a svelte component would make it more...

View Article

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 standard...

View Article

How do I use tailwindcss @apply directive inside a svelte component

This works:<div class="list p-2" />This doesn't work:<style lang="postcss"> @tailwind base; @tailwind components; @tailwind utilities; @layer components { .list { @apply p-2; }...

View Article


Astro + Svelte: Imported Svelte Components Have No Type Checking in VSCode

I'm using VSCode, and I've noticed that when I import Svelte components into my Astro components, they are typed as any, and TypeScript does not type-check the props.I have set up my project...

View Article


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 will...

View Article

Svelte 5 Unsafe State Mutation at Tree Component

I need help with Svelte components. I've built a tree that should allow users to check nodes and update related nodes. When a node is checked, its parents and children should react accordingly....

View Article

Svelte input blur triggered when element is focused

Maybe its not related to svelte, but if do some DOM changes after input is focused, for example<input onfocus={() => toggleVisibiltyOfOtherElement = true } onblur={() => console.log("blur")}...

View Article


Image may be NSFW.
Clik here to view.

How to Create my own Svelte Embed Component

Certain platforms like GitBook allow you to insert an embed URL, like https://www.youtube.com/embed/eGUEAvNpz48, and it displays as a component on that website, as seen here:I want to create my own...

View Article

Having trouble promisifying Google ReCAPTCHA v2 Invisible in Svelte 5 /...

I have been trying to get Google ReCAPTCHA v2 invisible work with sveltekit 2 / svelte 5 and I have run into a few issuesFirst of all this is the documentation for how to load CAPTCHA in your...

View Article

How to trigger LayoutServerLoad on every navigation in SvelteKit?

I want to add a JWT verification/refresh in +layout.server.ts that is called on every navigation action.I've got following code and noticed that the console.log() statement is only ran, when I reload...

View Article

Svelte (vite?) installing static resources

How can I make static resources (e.g. fonts/images) in a node_modules package available in a Svelte application?I'd like the process to be automatic so you don't have to do anything manual if you use a...

View Article



Parameters in svelte action not reactive

Svelte action that does things when keys are pressed:import type { Action } from "svelte/action"export const keys: Action<HTMLElement, boolean> = (node, active?: boolean) => { function...

View Article


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>