sw3dish
I am trying to use Alpine JS (3.13.2) with Phoenix 1.7.10, using dead views generated by mix phx.gen.html
In a file such as my_app/lib/my_app_web/controllers/example_html/index.html.heex, I can use x- attributes from Alpine, such as x-data on non-CoreComponents such as <button> or <div>, but cannot use them on CoreComponents such as <.icon>.
When writing <.icon name="hero-heart" x-init={~s(console.log("I am being initialized"\))} /> I receive a compilation warning:
warning: undefined attribute "x-init" for component MyAppWeb.CoreComponents.icon/1
lib/my_app_web/controllers/example_html/index.html.heex:5: (file)
I have modified the following lines:
- in
lib/my_app_web/components/core_components.ex- use Phoenix.Component + use Phoenix.Component, global_prefixes: ["x-"] - in
lib/my_app_web.exdef live_view do quote do use Phoenix.LiveView, ... + global_prefixes: ["x-"] ... end end ... def live_component do quote do - use Phoenix.LiveComponent + use Phoenix.LiveComponent, global_prefixes: ["x-"] end end ... def html do quote do - use Phoenix.Component + use Phoenix.Component, global_prefixes: ["x-"] ... end end
I saw a closed issue on the Phoenix repo that states that global_prefixes must be set in the caller – but I’m not sure where I would add that in my lib/my_app_web/controllers/example_html.ex file which looks like this:
defmodule MyAppWeb.ExampleHTML do
use MyAppWeb, :html
alias MyApp.Examples.Example
embed_templates "example_html/*"
@doc """
Renders a example form.
"""
attr :changeset, Ecto.Changeset, required: true
attr :action, :string, required: true
def example_form(assigns)
end
Any help would be appreciated!
Trending in Questions
Other Trending Topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ai
- #ecto-query
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #metaprogramming
- #hex











Showing Posts 1 to 2- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
sw3dish
Additionally, in
phoenix_live_view/lib/phoenix_component.ex, it is stated that:So, using Alpine’s
.prefixmethod, I changed the prefix of Alpine directives todata-x-(Alpine.prefix("data-x-") in the hope that they would be accepted as an attribute prefix without me needing to useglobal_prefixes.However, the
data-x-initattribute still returns the following:So it seems to me that any attributes added to a use of a
CoreComponentswould be stripped?(It’s also occurred to me that, in this case, I can just wrap the
<.icon>in a<div>/etc.)Kurisu
I think this issue is not related to Alpine JS attributes in particular. Try to use any other attribute than
nameandclass(the ones declared in the icon component definition header) and you will get the same error.For example
Will show the same warning because
idortitleare not declared.So you have to extend the component so it takes more attributes. You can declare the specific ones you need (
:"x-init") or just allow global attributes.