and the naming structure (+page.server.ts, +page.svelte.ts, etc) indicates its role (server vs UI, in this example). You can also use these conventions with+layout.sveltefiles to pass along common components throughout the child routes. SvelteKit takes all the tedious work...
Or you can pass them in whatever form you prefer tosentrySvelteKit: // vite.config.(js|ts)import{sveltekit}from'@sveltejs/kit/vite';import{sentrySvelteKit}from'@sentry/sveltekit';exportdefault{plugins:[sentrySvelteKit({sourceMapsUploadOptions:{org:'my-org-slug',project:'my-project-slug',authT...
As mentioned above, every+page.sveltecomponent in the routes folder defines one route. But what about code that should apply to many pages at once? For this, we have thelayoutcomponent, named+layout.svelte. This component contains code that applies to every page next to it and below it. ...
First, let’s move our data loading from our loader in+page.server.jsto anAPI route. We’ll create a+server.jsfile inroutes/api/todos, and then add aGETfunction. This means we’ll now be able to fetch (using the default GET verb) to the/api/todospath. We’ll add the same data...
Works with both+page.ts/+layout.tsand+page.server.ts/+layout.server.tsload functions Cons: If you are callingcreateQueryin a component deeper down in the tree you need to pass theinitialDatadown to that point If you are callingcreateQuerywith the same query in multiple locations, you need...
When doing E2E tests with Playwright, I can use Playwright's page.route feature to intercept browser requests to specific URLs and return my test data instead of what that URL would have returned (and the URL is never hit). This works only in the browser that Playwright is driving, and ...
If you don't ever have any state that needs to be kept, you can useallowReloadOnNavigateWhileMountedin yoursrc/routes/+layout.sveltefile: import{allowReloadOnNavigateWhileMounted}from"sveltekit-adapter-versioned-worker/svelte";// ...allowReloadOnNavigateWhileMounted();// ...<!-- ... --> ...
If you don't ever have any state that needs to be kept, you can useallowReloadOnNavigateWhileMountedin yoursrc/routes/+layout.sveltefile: import{allowReloadOnNavigateWhileMounted}from"sveltekit-adapter-versioned-worker/svelte";// ...allowReloadOnNavigateWhileMounted();// ...<!-- ... --> ...
We also need to adjust the +layout.js: here, we'll need to create a dataConfig variable in which we can store the data we get using useStoryblokApi from the config Story and pass the version as well as the resolve_links parameter. Then, we'll return the header_menu (with a property...
Create a +layout.server.js file at the root and returning the DeviceType from there. /**@type{import('./$types').LayoutServerLoad} */exportconstload=({locals})=>{return{deviceType:locals.deviceType};}; You'll now have access to thedeviceTypedata by using$page.data.deviceTypeor via ...