Dynamic Routing in Svelte

Set up a catch-all route strategy in your Svelte project to render new stories dynamically.

Fetch and render a story dynamically

Update the +page.js file to fetch all stories in the space.

src/routes/[...slug]/+page.js

/** @type {import('./$types').PageLoad} */
export async function load({ params, parent }) {
  const { storyblokAPI } = await parent();

  const response = await storyblokAPI.get('cdn/stories/home', {
  const response = await storyblokAPI.get(`cdn/stories/${params.slug || 'home'}`, {
    version: 'draft',
  });

  return {
    story: response.data.story,
  };
}

Get the slug from the current route params, defaulting to the home story.

Related resources

Routing in Svelte

Content Delivery API: Retrieve a Single Story

Content Delivery API: Retrieve Multiple Stories