Is it possible to load JS code from .js file in Twig template as inline?

1.1k Views Asked by stckvrw At 23 July 2022 at 11:16

I'd like to load JS code from JS file in Twig template and render it inline. As we can do it in PHP with file_get_contents('.../js/main.js').

I know I can load main.js.twig, but I need to load JS code from a file with .js extenstion

For example, main.js contains:

console.log('Works!');

And in my Twig template I try:

<script>
{% include "#{theme_dir}/js/main.js" %}
</script>

to render inline JS code like

<script>
console.log('Works!');
</script>

but I receive the error

Template ".../js/main.js" is not defined in ...

In my case Twig is used by CMS Grav

Original Q&A

There are 2 best solutions below

passerby On 23 July 2022 at 12:36 BEST ANSWER

Grav has its Asset Manager with which js/css assets can be added to Twig. Assets can be added as bundle and minified or can be inlined.

In Twig you first define the assets to add in the <head> of the page:

{% block javascripts %}
    {% do assets.addJs('jquery', 101) %}
    {% do assets.addJs('theme://js/jquery.treemenu.js', { group: 'bottom' }) %}
    {% do assets.addJs('theme://js/site.js', { group: 'bottom' }) %}
    {% do assets.addJsModule('plugin://my_plugin/app/main.js', { group: 'bottom' }) %}
{% endblock %}

and then load the assets elsewhere in Twig:

{% block bottom %}
    {{ assets.js('bottom')|raw }}
{% endblock %}

To enable/disable bundling and minification of assets, use the settings in /user/config/system.yaml. See AssetManager/Configuration

assets:
  css_pipeline: true
  css_minify: true
  js_pipeline: true
  js_minify: true

stckvrw On 23 July 2022 at 11:26

Oh, sorry - the problem was in the path: JS file should be in /templates/ directory of Grav theme. Now it works.

Also we can use Grav read_file() function to load file content from any directory as variable and change it before rendering if we need:

<script>
{% set js = read_file("#{theme_dir}/js/main.js") %}
{{ js|raw }}
</script>

Is it possible to load JS code from .js file in Twig template as inline?

There are 2 best solutions below

Related Questions in SYMFONY

Related Questions in TEMPLATES

Related Questions in TWIG

Related Questions in GRAV

Trending Questions

Popular # Hahtags

Popular Questions