question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Generate automatic `<slot />` `+layout.svelte` when `+layout.ts` is present

See original GitHub issue

Describe the problem

Sometimes, I just want to create “side effects” from visiting a route:

// +layout.ts
import { crumbsStore } from '$lib/components/Breadcrumb';
import type { LayoutLoad } from './$types';

export const load: LayoutLoad = () => {
	crumbsStore.addCrumb({ path: '/data-analytics/operations', name: 'Operations', enabled: true });

	return {
		pageTitle: 'Operations',
	};
};

In this case, there doesn’t need to be any +layout.svelte, because all I want to do is add my pageTitle to the rolled-up data object (which my root layout is listening to, setting the page’s Title) and add a breadcrumb to a store (which is how my Breadcrumb component works). Right now, I have to create a +layout.svelte with only <slot /> as the content, or nothing will be rendered on or under this route. That seems kind of silly.

Describe the proposed solution

When a +layout.ts or a +layout.server.ts exists but there isn’t any +layout.svelte, Kit should just inject a default +layout.svelte containing an empty slot.

Note: If we went this route, we’d have to make an update to how we’re generating types, as currently +layout.ts and +layout.server.ts don’t get their types generated if there’s no +layout.svelte.

Alternatives considered

Just live with the extra files 🤷🏻

Importance

nice to have

Additional Information

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:25
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
AlbertMarashicommented, Aug 19, 2022

Also bumped into this issue, was confused why LayoutLoad wasn’t appearing in import("./$types"). Creating a +layout.svelte with a <slot/> worked

0reactions
UnlimitedBytescommented, Oct 8, 2022

Ran into this while following the docs: https://kit.svelte.dev/docs/load#input-methods-parent and it was very annoying to find out what the hell was wrong because the docs list it as valid…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Routing • Docs • SvelteKit
To create a layout that applies to every page, make a file called src/routes/+layout.svelte . The default layout (the one that SvelteKit uses...
Read more >
How to Create a Blog with SvelteKit & Strapi
In this tutorial, you'll learn the basics of SvelteKit and create a blog website using the SvelteKit framework and using Strapi for content ......
Read more >
SvelteKit slot indirection? - Stack Overflow
src/routes/index.svelte --> <script lang="ts"> import GameMenu from ... My first goals were to automate the flex menu creation aspects, and, ...
Read more >
Make A Typing Game With Svelte - Joy of Code
Second let's add a layout file to import the styles and define a layout. routes/+layout.svelte. Copy. <script lang ...
Read more >
Getting Started with SvelteKit: 10 Tips | Rodney Lab
In SvelteKit, if you create a file with the path src/routes/+layout.svelte , this is automatically interpreted as the default layout for your app....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found