How to add Javascript the right way in Sage10

Here’s a link that should get you started: Modules, introduction

If I’m understanding your question, you’re looking to break up your app.js file into modules. Here’s a simplified example from a recent project:

/resources/scrpts/animations.js

export const animations = async (err) => {
  if (err) {
    console.error(err);
  }

  // ...
};

import.meta.webpackHot?.accept(animations);

/resources/scripts/app.js

import domReady from '@roots/sage/client/dom-ready';
import {animations} from './animations.js';

/**
 * Application entrypoint
 */
domReady(async () => {
  animations();
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
import.meta.webpackHot?.accept(console.error);
7 Likes