javascript module question

Question

Hi hope you can help with this and hoping it's simple. I need to write a javascript module and would like to use the js tag:

{% js %}
    //script here


{% endjs %}

This is good because it only gets embedded when needed and it gets placed at the bottom of the page and I can add craftcms variables to it. The problem I have is that the script is being outputted as

<script>
// script here
</script>

and what I need is

<script type="module">
// script here
</script>

Any idea how I can do that? Thanks

score 4 · Answer 1 · answered May 13 '22 at 09:52

4

You achieve this by adding a param to the tag:

{% js 'path/to/jsfile.js' with { type:'module' } %}
// outputs <script type="module" src="path/to/jsfile.js">

answered May 13 '22 at 09:52

Robin Beatty

41
2

score 2 · Answer 2 · answered Sep 22 '20 at 11:08

I'm not sure this is possible, but another approach would be to create a new extendable block in your parent template:

// layout.twig
{% block scripts %}
{% endblock %}

// component.twig

{% extends 'layout.twig' %}

{% block scripts %}
    <script type="module">
        // script here
    </script>
{% endblock %}

javascript module question

2 Answers2