Cervajz
Use .html.heex file for Phoenix.Component template (instead of ~H)
Hello,
I’d like to use Phoenix function component but without the HEEX code being part of the module’s code - the HTML template is pretty long to be included in the Elixir module itself and would make the navigation and editing expierence somewhat hard.
Is there any way I could render the HTML from an external .html.heex file from within the function body, please?
Something like this
defmodule DashboardWeb.Components.Navigation do
use Phoenix.Component
def main_navigation(assigns) do
# Render .html.heex file here instead of the ~H sigil
end
end
Directory structure:
I haven’t found any information in the documentation or in the source code and I failed all of my tries rendering the file view Phoenix.View or LiveView or even via Phoenix.Template ![]()
In Phoenix.LiveComponent this was automatically done when the render function was not defined in the component module (via Phoenix.LiveView.Renderer.before_compile) but I can’t figure out how to elegantly do it in the function component world.
Thank you and have a nice one ![]()
Most Liked
seb3s
Hello,
sure it functions
I do this in my code :
defmodule VtmeetWeb.Component do
use Phoenix.Component
def avatar(assigns) do
Phoenix.View.render(VtmeetWeb.LiveView, "component/avatar.html", assigns)
end
end
And my dir is

Hope this helps,
cheers
Sébastien
josevalim
seb3s
Currently the components I used are within liveview. So I’ve not tried what you want to accomplish.
Here is my liveview module
defmodule VtmeetWeb.LiveView do
use VtmeetWeb, :subtemplate_view
end
and the subtemplate_view def within vtmeet_web.ex :
def subtemplate_view do
quote do
use Phoenix.View,
root: "lib/vtmeet_web",
namespace: VtmeetWeb,
pattern: "**/*"
# Import convenience functions from controllers
import Phoenix.Controller, only: [get_flash: 1, get_flash: 2, view_module: 1]
# Include shared imports and aliases for views
unquote(view_helpers())
end
end
Note the pattern which allow to find the template in subdirectories (maybe that’s what is missing in your case).
Sébastien.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex










