✳flâneur — a map of the web's best reading

Shared modules / The $lib alias • Svelte Tutorial

learn.svelte.dev · 621 words · saved by 1 readers

Because SvelteKit uses directory-based routing, it's easy to place modules and components alongside the routes that use them. A good rule of thumb is 'put code close to where it's used'. Sometimes, code is used in multiple places. When this happens, it's useful to have a place to put them that can be accessed by all routes without needing to prefix imports with ../../../../. In SvelteKit, that place is the src/lib directory. Anything inside this directory can be accessed by any module in src via the $lib alias. Both +page.svelte files in this exercise import src/lib/message.js. But if you navigate to /a/deeply/nested/route, the app breaks, because we got the prefix wrong. Update it to use $lib/message.js instead: Do the same for src/routes/+page.svelte: Next: Forms

Shared modules / The $lib alias • Svelte Tutorial Skip to main content Tutorial Packages Playground Blog Basic Svelte Introduction Welcome to Svelte Your first component Dynamic attributes Styling Nested components HTML tags Reactivity State Deep state Derived state Inspecting state Effects Universal reactivity Props Declaring props Default values Spread props Logic If blocks Else blocks Else-if blocks Each blocks Keyed each blocks Await blocks Events DOM events Inline handlers Capturing Component events Spreading events Bindings Text inputs Numeric inputs Checkbox inputs Select bindings Group

Explore this link on the map →

related reading