sv@0.6.21 not generating a tailwind.config.js file - problem with UI libraries
I created my Svelte project using sv@0.6.21npx sv@0.6.21 create appAdded the TailwindCSS packagenpx sv@0.6.21 add tailwindcssAnd then tried to install shadcn-sveltenpx shadcn-svelte@next initHowever...
View ArticleVite not building the CSS when an imported LESS file is modified
My main.js file (entry point) is importing _app.less. And _app.less is in turn importing several LESS files.But, whenever I modify an imported LESS file, I can see a hmr event in the console ([vite]...
View ArticleSvelte Maplibre Popup open issues
I am having a problem with a Popup opening on hovering over an area on a map<script> let showPopup = false; const setPopup = (e: any) => { showPopup = true; }</script><GeoJSON...
View ArticleProvide data to main Layout from any route in SvelteKit
I have to following folder structure and I'm struggling to find the best way to provide my main layout with some props.src/└── routes/└── (app)/├── route1/│└──+page.svelte├──...
View ArticleSvelte child component props doesn't update on parent state change
Parent component:<script> import Child from "./Child.svelte" import { onMount } from "svelte"; import apireq from "./api.js"; let items = $state.raw([]); let splitItems = $derived(items.splice(0,...
View ArticleIs there anyway to control the snap animation using Svelte or TailwindCSS?
I have a snap-y snap-mandatory overflow-y-scroll container with several items inside. The snap is working, but I don't like how the snap is animated.Is there any way to control the animation of the...
View Articlecannot access $app/environment variable *building* in playwright
I need to access $app/environment var buildingI have no problem in dev.But when i run playwright test i get error $app package is not avail.I have no idea how to access this var, for $env vars I use...
View ArticleLaravel 11 CORS problem on localhost with Svelte
I built a simple API in Laravel, with CORS parameters configured in cors.php and middleware. Tested on Postman and it works giving the response I wrote. When testing on Svelte it gives me the CORS...
View ArticleHow to get a component's children height?
I'm trying to create a component that will render it's children when it comes into the viewport, here's the code:<script lang="ts"> import type { Snippet } from 'svelte'; import { viewport } from...
View ArticleMarkdown-it-katex - how to make superscript?
This is my code (Svelte 5, sveltekit, tailwind):<script lang="ts"> import MarkdownIt from 'markdown-it'; import markdownItKatex from 'markdown-it-katex'; import 'katex/dist/katex.min.css'; const...
View ArticleHow do I use oninput this.reportValidity in svelte
This code works perfectly in HTML<input type="text" name="country" pattern="[A-z]{3}" oninput="if (typeof this.reportValidity === 'function') {this.reportValidity();}"/>How do I use it in...
View ArticleHow to triger $effect() with bound variables in svelte?
I have a variable that is correctly bound to its parent: its value changes on click, and that value is correctly displayed in both parent and bound child. You can test that in svelte...
View ArticleHow 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="My Site...
View ArticleKeycloak init in Svelte and then serve data according to the token properties
Okay after ramming with this for several days I have to kindly ask the community.I have a Svelte project, which integrates with Keycloak instance. All my keycloak functions are located in separate...
View ArticleCannot access to values in store of Map in Svelte
I have simple store of new Map() and I like to iterate it in Svelte component. In the {#each} block i can see it iterates as many times as Map has elements but I can't see values.<script> import...
View ArticleMedia queries vs. svelte:window innerWidth - Which one is better way to build...
While building a responsive webpage using sveltekit, I found two ways to render different UIs depending on the device width: media queries and bind:innerWidth with svelte:window.Media query seems to be...
View ArticleUnexpected character '@' when migrating from Svelte 4 to Svelte 5
I am migrating a a Svelte 4 app to a Svelte 5 app, I used the npx command linenpx sv migrate svelte-5This resulted in my <slot /> tag in my layout.svelte file on my front page being replaced with...
View ArticleHow to remain reactivity in SvelteMap between components
I have three files:App.svelte:<script> import Component from "./Component.svelte" import { items } from "./store.js" $items.set("a", { name: "John", index: "a" }) $items.set("b", { name: "Jack",...
View ArticleHow to remove unused colors during build?
When I run the build script in my svelte kit tailwind project, with Tailwind v4, it add every single tailwind color. I only use one single tailwind color, so I'd like to remove them.I spent a while...
View ArticleHow to use SurveyJS Custom Item Template in Svelte?
In the documentation JS example JSX syntax is used which doesn't seem to be easily transferred to a .svelte file..?The vue example registers a component// main.jsconst app =...
View ArticleSvelte variable not updating from localStorage without using setInterval and...
I have an app that stores items into locations in localStorage and then displays the items in HTML.One of the reasons i wanted to use Svelte was for reactive variables, but whenever I attempt to use a...
View ArticleHow can I create a route alias in solidstart's file routing and keep layout?
I'm trying to wrap my head around how to best do nested layouting using SolidStart's file based routing. I have an old app with a "route alias" from "/" to "/some/nested/page/with/layouts". I'm trying...
View ArticleClik here to view.
Height 100% not working on flex-box>flex-1? [duplicate]
I have a problem with making my element filling the height of flex-box children. As you can see in the image, h-full of Tailwind is not working (width x 0), when the parents, is having a good height of...
View ArticleSvelteKitError: Not found: /undefined/get-paginated in Docker Container
I am encountering an issue with loading environment variable in my SvelteKit application when running it inside a Docker container. This question is extended from this questionThe error I'm seeing...
View Article$lib imports in vanilla javascript with svelte / sveltekit
Is there any way to make statements like this work in vanilla javascript w/ svelte/sveltekit? I'm not using typescript. VS Code as my IDE.import { googleAuth, auth } from '$lib/server/auth'The...
View ArticleHaving a hard time understanding reactivity in a Svelte array for SuperForms
I have the following form in SuperForms: const { form } = superForm<CreateJobSchema>(data, { validators: typeboxClient(CREATE_JOB_SCHEMA), onError: (error) => { console.error(error)...
View ArticleClik here to view.
Shallow Routing throws 404 when typing address directly or reloading item...
Shallow routing works well when clicking on an itemShallow routing throws 404 when typing item url directlyLink to Stackblitz that shows the issuesrc/routes/(news)/+layout.svelte<script...
View ArticleCannot create Sveltekit app - ERR_TTY_INIT_FAILED uv_tty_init returned EBADF...
When I run the recommended $ npm create svelte@latest myapp, I get the following error: Welcome to SvelteKit!node:internal/errors:490 ErrorCaptureStackTrace(err); ^SystemError [ERR_TTY_INIT_FAILED]:...
View Articlesveltekit: how do I run startup/init code before anything else
The env:sveltekit 1.20.4svelte 4.0.5viteadapter-nodeHow do I run startup code, before the server starts handling requests?I need to start multiple services before a single request is handled, and for...
View ArticleIs it possible to know the redirect origin when server-side redirecting to...
I hate two routes in my SvelteKit app, /a and /b. The first route can conditionally redirect to the second when loading:// src/routes/a/+page.server.tsexport async function load({ url }) { // some...
View Article