Learning Resources>Guides/Tuts/Tips/Info

LiveView LiveComponents article

/phoenix#blog-posts#liveview#livecomponents
stryrckt

stryrckt

LiveView LiveComponents article

I’m excited about the new LiveComponents feature in LiveView, but I haven’t seen much written on it, so I decided to write a couple of articles based on a talk I gave at our Portland, Oregon Elixir meetup. The first article is an introduction to LiveComponents and is available now. The second one will be out later next week and walk through a more elaborate example.

You can find the first article here:

8 comments
#blog-posts
32 2102 8

Most Liked

stryrckt

stryrckt

I have updated the article and code to LiveView 0.13.3.

4
Post #6
imartinat

imartinat

Hi,

Could you please update the mount definitions in the LiveComponents to contain only the socket? (https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html#c:mount/1) . If we follow your article, and add internal state to the LiveComponents, it doesn’t work : Livecomponent: assign @value not available in eex template. Why such behaviour?
Thanks.

1
Post #3

Where Next?

View thread on forum
phoenix
blog-posts
liveview
livecomponents
Home Learning Resources>Guides/Tuts/Tips/Info
/phoenix#blog-posts#liveview#livecomponents
32 2102 8
Last post

Popular in Guides/Tuts Top

annad
Learning Resources>Guides/Tuts/Tips/Info

LiveView and Phx.Gen.Auth: How to have an unauthenticated liveview pass to an authenticated one
I’m posting this for developers who are totally new to Phoenix like myself. This is all probably obvious to more skilled Phoenix develope...
/phoenix#liveview
9 1947 2
New
AstonJ
Learning Resources>Guides/Tuts/Tips/Info

Your Elixir Tips Thread
This blog post hit my timeline earlier, and I’ve also been learning about some fantastic Elixir related tips via @pragdave’s new online c...
#tips
65 5120 12
New
jswny
Learning Resources>Guides/Tuts/Tips/Info

Flexible Dockerized Phoenix Deployments (1.2 & 1.3)
Hello everyone, I recently redesigned my entire deployment process for Phoenix apps based on Docker. I really like the strategy that I ca...
/phoenix#docker#deployment
56 12024 74
New
zookzook
Learning Resources>Guides/Tuts/Tips/Info

Elixir and MongoDB
If you want to use the MongoDB in your next Killer-App-Project, but you did not dare ask because otherwise many would advise you to use P...
#mongodb-driver
16 9151 10
New
fmcgeough
Learning Resources>Guides/Tuts/Tips/Info

Want to pipe into a Case statement? You can!
pipe into case? I use that fairly frequently…unless I’m misunderstanding what you’re wanting…could be… its still very early… str = "Hell...
#split-thread
68 15140 18
New
Zurga
Learning Resources>Guides/Tuts/Tips/Info

How to use MessagePack with LiveView instead of JSON
In a quest to optimize the amount of data sent between the server and client I recently decided to try to use MessagePack instead of JSON...
/phoenix
13 998 1
New
bitli
Learning Resources>Guides/Tuts/Tips/Info

Instructions to run Elixir on Android
In case this is handy for other people, here is how you can run Elixir on Android: Install https://termux.com/ apt update; apt upgrad...
#android
26 14916 27
New
f0rest8
Learning Resources>Guides/Tuts/Tips/Info

Tip for rendering forms per row in a table (e.g. the new phx 1.7 table component)
Hi, TLDR: form attribute set on the input fields and button submit. I just wanted to share a solution I discovered when making live inl...
#liveview#form
7 1029 2
New
water
Learning Resources>Guides/Tuts/Tips/Info

Flake.nix Phoenix & PostgreSQL
I’ll post this here, It might help someone in the future. Feedback is greatly appreciated. I use it with direnv on NixOS, It should wor...
/phoenix#linux#postgres#nix#macos
28 5681 7
New
marcin
Learning Resources>Guides/Tuts/Tips/Info

Debugging a remote node - how was it and what have I learned
This post is intended to be a guide for others, I was running a remote debugger for the first time and appreciate feedback on how I could...
#distribution#mix-release#debugger
17 2300 2
New

Other popular topics Top

chrismccord
News>Phoenix News

Phoenix v1.3.0-rc.0 released
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
/phoenix#phoenix-release
434 29869 96
New
aesmail
News>Announcing

Kaffy - a quick and flexible admin interface for phoenix applications
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
/phoenix#ecto#library#admin-tools#kaffy
301 24265 97
New
Patoshizzle
Questions & Help>Questions

(Postgrex.Error) FATAL 28P01 (invalid_password) password authentication failed for user “postgres”
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
#ecto#postgres#troubleshooting
10 29682 20
New
fireproofsocks
Questions & Help>Questions

Ecto delete a record WITHOUT selecting first
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
#ecto#optimization#delete-method
22 16932 8
New
chrismccord
News>Phoenix News

Phoenix v1.5.0 released!
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
/phoenix#phoenix-release
379 29106 93
New
saif
Chat & Discussions>Chat / Discussions

Dialyzer - Function foo/1 has no local return
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
#dialyzer#type-checking
15 20018 5
New
Brian
Questions & Help>Questions

Import a module from a file into IEX
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
#iex
35 32612 16
New
hariharasudhan94
Questions & Help>Questions

What is the best IDE for elixir?
I would like to know what is the best IDE for elixir development?
#code-editors
33 49638 23
New
dogweather
Chat & Discussions>Chat / Discussions

The complexity of Haskell vs. Elixir's simplicity
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
#language-implementation#haskell
138 29967 35
New
jononomo
Questions & Help>Questions

Websocket connection works on localhost, but get 403 error when deployed via docker
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
/phoenix#channels
8 26791 12
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Learning Resources>Guides/Tuts/Tips/Info

Resources Guides/Tuts ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

ElixirCasts

Producing high quality Elixir screencasts since 2017.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Manning

Develop your skills with books, videos, and courses.

WyewWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Manning

Develop your skills with books, videos, and courses.

WyewWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement