Questions tagged [sveltekit]
[SvelteKit](https://kit.svelte.dev/) is a framework for building fullstack web applications with the Svelte framework.
2,331
questions
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
32
votes
4
answers
37k
views
npm run dev --host network: not exposed
I want to expose my svelte app on LAN using the npm run dev --host command but it shows:
> [email protected] dev
> svelte-kit dev
SvelteKit v1.0.0-next.295
local: http://localhost:3000
...
- 467
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
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
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
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
21
votes
2
answers
7k
views
SvelteKit, import type LayoutServerLoad/PageLoad
In layout.server.ts I try to
import type { LayoutServerLoad } from './$types';
but the type can't be found:
'"./$types"' has no exported member named 'LayoutServerLoad'. Did you mean '...
- 535
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
19
votes
4
answers
27k
views
Where to put images with SvelteKit
I have been using Svelte for a little while and now I have switched to SvelteKit so I can add multiple pages. I want to add some images to my site but I don't know where to put them. In Svelte I would ...
- 703
19
votes
3
answers
17k
views
SvelteKit: disable SSR
I made an app in Svelte and now I wanted to port it to SvelteKit. My app uses window and document objects, but those aren't available in SSR. Firstly, it threw ReferenceError: window is not defined, ...
- 368
18
votes
3
answers
14k
views
visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event
A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.svelte (a11y-click-events-have-key-events)
what does this error ...
- 663
17
votes
3
answers
14k
views
cannot find package sveltejs/adapter-auto svelte.config.js
I am new to SvelteKit and have built an initial project from the SvelteKit docs. When the project opens I receive the following error when looking at index.svelte.
Error in svelte.config.js
Error [...
- 2,931
16
votes
2
answers
10k
views
How can I tell whether SvelteKit's "load" function is running on the server vs. client?
I'm trying to do API calls in a SvelteKit page from the load function, but I don't want to proxy these calls with local endpoints because I want to keep the web server as light as possible.
What I ...
- 27.1k
16
votes
2
answers
9k
views
Unable to access request.body from the endpoint.js in sveltekit skeleton project
After initiating a skeleton project from sveltekit app. my index has a form :
<script>
let name
let password
async function submitit(){
// console.log("name is :", ...
- 1,071
15
votes
4
answers
12k
views
Going back to the previous page with 'goto' / Sveltekit navigation
I normally use the following to redirect to any page without using window.location.href in Sveltekit
import { goto } from '$app/navigation';
const goSomeWhere = () :void => {
goto('/')
}
But ...
- 604
15
votes
2
answers
7k
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=&...
- 620
15
votes
1
answer
7k
views
SvelteKit loading indicator when a page load time threshold is exceeded
I am using SvelteKit for a website that is mainly server-side rendered pages. The client-side navigation on SvelteKit works beautifully and is super snappy. However, sometimes, when the backend server ...
- 82.1k
14
votes
1
answer
5k
views
Sveltekit + Typescript: Environment variables build error
I want to use environment variables in my Sveltekit app - it works fine on dev server, but I get this build error:
Error: 'PUBLIC_KEY' is not exported by $env/static/public, imported by src/routes/+...
- 1,134
14
votes
3
answers
12k
views
Building svelte app as a set of static files
I want to use Svelte in my next project, due to its clean syntax and how nice is to work in it. Unfortunately, to deploy the app in my company I can't use node or anything like that on the server. I ...
- 2,907
14
votes
1
answer
6k
views
Setup SSG and Prerender in SvelteKit
I just got started with SvelteKit and read the documentation. I would like to use SSG in my app and prerender every page. I configured my app as the documentation said but nothing seems to work as ...
- 301
13
votes
1
answer
6k
views
How can I send secure API requests from SvelteKit app, without showing API keys on the client side?
I'm using Supabase for a new Sveltekit app, with this template
Currently, I'm passing the Supabase keys through on the client side, like this:
const supabase = createClient(
import.meta.env....
- 317
13
votes
3
answers
10k
views
SvelteKit console error "window is not defined" when i import library
I would like to import apexChart library which using "window" property, and i get error in console.
[vite] Error when evaluating SSR module /src/routes/prehled.svelte:
ReferenceError: window ...
- 321
12
votes
1
answer
11k
views
SvelteKit - load() not called from component but works as a Page
If the file test.svelte below is a Page in /routes, it successfully calls load() and populates the template with the JSON array it retrieves when I access it via http://localhost:3000/test. If I move ...
- 1,427
12
votes
1
answer
6k
views
What do %svelte.head% and %svelte.body% represent?
Absolute noob to Svelte workflows, but it's been strongly recommended by people I respect and I want to get to grips with it.
Kind of pretty clear so far, but when I worked through the SvelteKit setup ...
- 141
12
votes
5
answers
4k
views
How to execute code on SvelteKit app start up
I have a SvelteKit based application in development. On the server startup, be it on a development server boot up, Node.js adapter boot up I would like to execute some diagnostics commands. An example ...
- 82.1k
12
votes
3
answers
4k
views
how to use tailwinds @apply with @layer directive from a Svelte component
I want to use apply to define some css setting on a component, and I also want to be able to overwrite it, like this:
<!-- CustomButton.svelte -->
<script>
let className = '';
...
- 60.5k
12
votes
1
answer
965
views
Sveltekit and shared state - can someone give a concrete example of when to use event.locals vs. $page.data?
The official SvelteKit docs have this little blurb regarding shared state:
In many server environments, a single instance of your app will serve multiple users. For that reason, per-request state ...
- 5,934
12
votes
2
answers
6k
views
Pass variable up from page to svelte layout via slot
So I can't figure a way to pass a variable up in my __layout variable from the component displayed in the <slot>.
I tried a few things, using bind: or let: on the slot but it doesn't work. I ...
- 1,006
11
votes
2
answers
26k
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 ...
- 111
11
votes
1
answer
4k
views
Sveltekit and SSR
I need a bit of help understanding SSR in the context of sveltekit. I noticed that the load method is called both on the server and the client and I cannot wrap my head around this. I guess it is ...
- 16.5k
11
votes
0
answers
4k
views
How do you attach the VS Code debugger to a running Sveltekit typescript process?
How do you attach the VS Code debugger in a fresh Sveltekit project?
I have created a repository here.
The launch.json file looks like this:
{
"version": "0.2.0",
"...
- 3,353
10
votes
5
answers
16k
views
How to update the page and query parameters in SvelteKit?
I have a page with a search field. If accessed with a query parameter (e.g. ?word=cat) the page should load with results present and the search field filled. If a search is done the results and the ...
- 1,328
10
votes
1
answer
5k
views
How to extend Locals interface in SvelteKit
The Svelte documentation shows how to set an element on locals in hooks: https://kit.svelte.dev/docs/hooks#server-hooks
event.locals.user = await getUserInformation(event.cookies.get('sessionid'));
...
- 1,398
10
votes
2
answers
8k
views
How to access websocket in svelte?
<script>
const socket = new WebSocket("ws://localhost:8000/chat")
socket.addEventListener("open", ()=> {
console.log("Opened")
})
</...
- 123
10
votes
2
answers
3k
views
registering socket IO to vite for sveltekit
I have written a few apps using svelte and sapper and thought I would give sveltekit a go.
All in all it works, but I am now running into the issue of registering a worker on ther server.
Basically I ...
- 2,572
10
votes
2
answers
3k
views
Setting static asset cache TTL in SvelteKit
I am serving font and CSS files from /static using the default SvelteKit application template. I am using SvelteKit Node.js adapter.
The default cache time-to-live (TTL) seems to be 4 hours for /...
- 82.1k
9
votes
1
answer
8k
views
How to implement cookie authentication | SvelteKit & MongoDB
The question stands as-is - how to implement cookie authentication in a SvelteKit & MongoDB app? Meaning how to properly use hooks, endpoints, establish a DB connection and show it on a ...
9
votes
2
answers
8k
views
SvelteKit - How to make SCSS variables/mixins globally available to all components?
In Nuxt, I use the Style Resources package to make SCSS available globally and I can access variables and mixins in any component. How to do the same in SvelteKit?
- 139
9
votes
3
answers
12k
views
How to serve plain json files with sveltekit?
I tried doing something like this in my endpoint
routes/users.json.ts :
import * as api from '$lib/api'
export async function get({ query, locals }) {
const response = await this.fetch('static/...
- 565
9
votes
2
answers
2k
views
How to not reset the form on submit with `use:enhance` in Svelte?
I have a form that updates a product's information using a form with use:enhance and actions defined in +page.server.ts - However, whenever I submit the form, use:enhance resets the form elements and ...
- 498
9
votes
3
answers
2k
views
Getting the raw body of a request to a SvelteKit endpoint
I have an endpoint in my SvelteKit app which handles webhook requests from Stripe. Each request is signed so that it can be verified to come from Stripe.
The code I have to verify the event is from ...
9
votes
1
answer
9k
views
How do I disable minification when running "build" command in sveltekit?
I am deploying sveltekit to a dfinity container and I need to disable minification to debug.
I have to build a static version to deploy it with npm run build -- is there a vite option to disable ...
- 72.5k
9
votes
5
answers
7k
views
SvelteKit could not resolve dependency even though it's external
I'm making a user authentication page and in that matter, I'm using bcrypt for hashing. Everything was nice and well until I actually use the bcrypt module in the code. Running it in development mode ...
- 636
9
votes
1
answer
3k
views
Logging both in SSR and client side in SvelteKit routes and components
What kind of a logging solution could be a good fit in SvelteKit if server-side rendering must be enabled?
Configurable logging levels
Logs to a file/stdout when server-side rendering is run with ...
- 82.1k
9
votes
1
answer
4k
views
In sveltekit , how to pass props in slot using __layout.svelte File?
In __layout file I want to pass one variable lets say btnclicked="HR",and I want to collect same in the component which is rendered in Slot ? how to do it pls help ?
- 99
9
votes
1
answer
1k
views
Returnning the error page in Hooks / Sveltekit
The documentation seems a bit vague about showing the error page from Hooks. I am looking for a way to show the 404 page conditionally.
export async function handle({ event, resolve }) {
return new ...
- 604
8
votes
3
answers
5k
views
Use Sveltekit and Tailwind CSS
Sveltekit is finally in public beta. Does anyone know how to use it with Tailwind CSS? There aren't any official docs for this integration.
- 5,190
8
votes
6
answers
9k
views
Sveltekit: Styling active links with $page.path
I'm working on a sveltekit app with a sidenav containing links. I can't get the active class styling on my links to work properly.
The links are components in NavLink.svelte:
<script>
import { ...
- 243