Include

Use a Include definition to add in script, link, meta, or head dependencies.

Options

Global usage

"Include" can be global. It will be loaded on page load:

Include vs Script, Style - It's important to note that even when you put a Include inside of a Component, the file will be included without any modification and added to the global scope, meaning the CSS will be unprefixed and the JavaScript will be loose. This is why the Style and Script component parts exist: They are for "silo-ing stuff within a Component", while Include is for "including optional, global dependencies when a component mounts"

Component usage

"Include" can be inside a component. It will only load if that Component loads, although it will still load the tags globally, in head:

Allowing for bundling over file:

If "Include" is being used over file:/, make sure you use the .js.htm and .css.htm formats, so that it can load it both during dev mode (using normal script tags and links), but also be able to fetch and bundle it (since .htm is required for modulo.fetch to work).

Use Case 1: Dependencies

The simplest way to use Include is as a global definition. It will "include" it's contents in the head of the document as soon as Modulo loads. Note that it will NEVER include the same thing twice (it uses hashes to identify resources). This mode is great for following tutorials for integrating JS projects.

For example, to include Quill JS, it's as easy as just pasting in the head content they give you:

Use Case 2: Meta Info

Include can be used for adding meta tags to your page as well: