What is the standard method to require a defined JavaScript module inside of a single Phoenix Template?

I don't want the module required anywhere but inside this one template.

Here is a snippet of the files I am using.

web/static/js/trend_chart.js

let TrendChart = {
  //... some JS module code here
}

web/templates/layout/app.html.eex

This has the standard app load/require.

...

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

<script>require("web/static/js/app")</script>

...

web/templates/page/index.html.eex

<!-- what do i put in this template to require / load the TrendChart module code? -->
<!-- i don't want it required globally, so i don't want to put it in the app.html.eex file -->

Update #1

I'm really looking for a way to have two @inner blocks in the main layout. One for the content, and one for additional JavaScript items to be loaded after the content.

Something like sections in ASP.NET MVC. (I know, I know!)

So the app.html.eex would end up something like this:

...
@inner
...

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
<script>require("web/static/js/app")</script>

*something here to load page/template specific javascript*

What is the standard method to require a defined JavaScript module inside of a single Phoenix Template?

I don't want the module required anywhere but inside this one template.

Here is a snippet of the files I am using.

web/static/js/trend_chart.js

let TrendChart = {
  //... some JS module code here
}

web/templates/layout/app.html.eex

This has the standard app load/require.

...

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

<script>require("web/static/js/app")</script>

...

web/templates/page/index.html.eex

<!-- what do i put in this template to require / load the TrendChart module code? -->
<!-- i don't want it required globally, so i don't want to put it in the app.html.eex file -->

Update #1

I'm really looking for a way to have two @inner blocks in the main layout. One for the content, and one for additional JavaScript items to be loaded after the content.

Something like sections in ASP.NET MVC. (I know, I know!)

So the app.html.eex would end up something like this:

...
@inner
...

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
<script>require("web/static/js/app")</script>

*something here to load page/template specific javascript*

• javascript
• html
• phoenix-framework

• 1 So, I have this working by putting the <script src="<%= static_path(@conn, "/js/app.js") %>"></script> before the @inner so I can use the loaded JS libs within the individual page template. I was hoping there was another way to append JS after the @inner for a specific page. – John Long Commented Jul 12, 2015 at 3:29
• @toraritte this link is dead. probably it's better to include the relevant piece of code here the next time, than an external link alone. – mlen108 Commented Feb 22, 2022 at 12:33
• This article was the answer for me. – toraritte Commented Feb 22, 2022 at 16:17
• thanks. no need to remove your original ment tho - it might confuse others. – mlen108 Commented Feb 23, 2022 at 12:58

1 Answer 1

You can save the file to web/static/assets/trend_chart.js then it will be copied to priv/static/trend_chart.js and available from <script src="<%= static_path(@conn, "/trend_chart.js") %>"></script>.

All files saved to the web/static/assets directory are directly copied to priv/static without going through the build phase.