Curi's Svelte integration relies on stores and context. These are setup automatically if you pass a Curi router to the
Router component makes router related data available throughout the application.
Components that need to access the
navigation can do so with their corresponding getter functions.
getRouter function returns the actual router, while
getNavigation return stores that update whenever the application navigates.
Svelte allows you to render dynamic components using the
<svelte:component this> syntax. If you set Svelte components as the
body properties on your responses, you can combine
<svelte:component this> and
response.body to render the appropriate component for a
A root component is a good place to perform general application layout, like menus, in addition to rendering the response's
If your routes use an object to attach multiple components to a response, splitting them apart in computed properties may give your templates a cleaner look.
If you do attach multiple components to a response, please remember that you want every route to set the same
body shape. Otherwise, you'll have to determine the shape and change how you render, which can quickly become messy.
Link component is used to navigate between routes within an application. When it renders in the DOM, it will render as an anchor (
name prop describes which route clicking the link should navigate to. If you pass an invalid route name, Curi will warn you.
If a route has any params (or if any of a route's ancestors have params for nested routes), the
params prop is used to pass these to the
Link also takes
state props to attach their values to the location that will be navigated to.
Please check out the full
@curi/svelte API documentation to see every component that the package provides.