Dynamically loading Alpine components on page load.

app.js

import domReady from '@roots/sage/client/dom-ready';

/**
 * Alpine components
 */
import Alpine from 'alpinejs';
import * as components from './components/index.js';

/**
 * Application entrypoint
 */
domReady(async () => {
  // Kickstart our Alpine components
  Object.keys(components).forEach((component) => {
    let data = components[component]();
    Alpine.data(component, () => data);
  });
  Alpine.start();
});

components---index.js

import dropdown from './dropdown.js';
import modal from './modal.js';
import nav from './nav.js';

export {dropdown, modal, nav};

components---nav.js

export default () => ({
  init() {
    // Stuff
  },
});