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

Answer 1

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">

Answer 2

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 %}