Global Scripts & Interactions

Lumio Theme Documentation

Another advanced area that can confuse both beginners and experienced users is Lumio’s client-side behavior.

A lot of interaction logic is centralized in:

This file bootstraps interactive behavior for the whole site, including:

Lumio avoids eagerly loading all client-side features up front. Instead, GlobalScripts.astro waits for:

before importing heavier client modules.

That keeps initial page load lighter than putting every script on every page immediately.

const loadDynamicModule = async (key, importer) => {
  const mod = await importer();
  return mod;
};

Then features are loaded only if the DOM needs them, for example:

If an interaction appears “broken,” it may not be a markup problem alone. The issue could be:

If the problem is visual structure, start in the Astro component.

If the problem is hydration, animations, dynamic imports, or interaction timing, check GlobalScripts.astro and the specific widget file next.