Data Loading

Vuloom has two loading layers.

App shell data: app/loader.ts

Use app/loader.ts for request-aware data needed by the document shell:

• theme
• locale
• session snapshot
• shell navigation data

Read it with useAppData().

Route data: app/pages/**/loader.ts

Use route loaders for page and layout data.

export async function loader({ params }: { params: Record<string, string> }) {
  return {
    slug: params.slug
  };
}

Read route data with:

• useLoaderData() for the current matched node
• useRouteLoaderData(routeId) for an explicit route id

Generated typing

vuloom prepare generates route registries in .vuloom/types/.

That lets these APIs infer data by route id:

const blogData = useRouteLoaderData('blog/[slug]/page')
const appData = useAppData()