I don’t understand how to use the code in step four to render a component. The instructions are not clear. https://phoenix-ui.fly.dev/
I am hoping someone out there has a complete live view component example that is minimalistic and renders a single component. If I could see that I can move forward. I simply don’t know what they are asking me to do.
EDIT.
I do not see a “View Helpers” function in app_web.ex
It does not recognize it.
I loaded it in my deps ( mix deps.get )
I updated the tailwind config.
Then I did this…but I get an error saying it isn’t recognized.
defp html_helpers do
quote do
# HTML escaping functionality
import Phoenix.HTML
# Core UI components and translation
import AppWeb.CoreComponents
import AppWeb.Gettext
use PhoenixUI
# Shortcut for generating JS commands
alias Phoenix.LiveView.JS
# Routes generation with the ~p sigil
unquote(verified_routes())
end
end
defp view_helpers do
quote do
...
# Phoenix.UI macro which imports all components and JS interactions
use Phoenix.UI
# Or import components individually
import Phoenix.UI.Components.{Button, Tooltip, ...}
...
end
end
The entire library conflicts with my generator. I think the developer does it intentionally to get you to buy their library. No thanks
Unfortunately, this means the generators like mix phx.gen.live won’t work properly. If you want generators for Petal Components, look into buying Petal Pro.
Hey, Petal maintainer here. Sorry to give the impression we are money hungry. Petal Components existed before core_components.ex was added to the Phoenix generator, so not really possible for us to intentionally create naming conflicts.
How to handle the conflicts:
You can rename the 3 conflicting functions in core_components.ex (def modal, def table and def button)
I understand Petal Components generators would be handy and we are considering open-sourcing them. It’s tempting to make everything free but then we wouldn’t have the resources to maintain them as we’d have to go back to full-time jobs.