<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="331449" data-post-id="331449">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="heathen" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/heathen/120/2926_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  heathen
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Decided to switch here (and I owe you couple answers on GitHub, I remember that <img src="https://forum.elixirforum.com/images/emoji/apple/see_no_evil_monkey.png?v=15" title=":see_no_evil_monkey:" class="emoji" alt=":see_no_evil_monkey:" loading="lazy" width="20" height="20"> . But topics are quite huge, didn’t get enough time to explain my thoughts)</p>
<blockquote>
<p>Thinking about your idea… it would require a fairly complex interop of LiveView / JavaScript, mostly when it comes to slots and nesting components. I’m not sure if it’s really possible, since vue components woul need to be rendered differently depending if it’s nested inside other component or not (to avoid creating multiple root-level components) <img src="https://forum.elixirforum.com/images/emoji/apple/thinking.png?v=15" title=":thinking:" class="emoji" alt=":thinking:" loading="lazy" width="20" height="20"></p>
<p>But maybe I shouldn’t write here since it’s not the topic for it <img src="https://forum.elixirforum.com/images/emoji/apple/sweat_smile.png?v=15" title=":sweat_smile:" class="emoji" alt=":sweat_smile:" loading="lazy" width="20" height="20"> I think integrating client side hooks is a necessity for good UX. Recently there was a quite huge drama on twitter how LiveViews doesn’t scale because of delay between interaction and change in UI in Hey application. This could be avoided with hooks. Just it’s quite challenging to write complex components using hooks because it’s imperative - you have to control all changes by yourself, there is no way to declare a template and ask library to keep it in sync with the state… that’s why I’ve created LiveVue <img src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title=":wink:" class="emoji" alt=":wink:" loading="lazy" width="20" height="20"></p>
</blockquote>
<p>The only really missing part currently is a shared state: by “shared” I mean shared with the backend LiveView (I believe it’s quite simple to have global state shared between all - even related to different roots - LiveVue components via a singleton module or multiple). I still think that pinia with a custom store plugin could be a good candidate for that. But custom solution would work as well: something which will intercept specific messages from the frontend hooks and inject values into the socket. It’s just a basic abstract idea, I don’t fully understand how to get changes back to the LiveVue.</p>
<p>But having that it would be possible to have actual “reactive” connection between LiveVue and LiveView parts. Of course, it won’t be instant because of the roundtrip, but it is much easier than per-vue component <code>useLiveVue().pushEvent/2</code>. I would even urge to discourage people to use this method on a day-to-day basis (it can create bad habits <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"> components should avoid <code>inject</code>-like interactions); though I think it is a necessity to have this option.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331449" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580/32">Post #31</a>
	                </div>
	            </div>
              <div id="likers-container-331449" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331449"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #31"></div>
  </section>
</div>
    <div class="postbit" id="331539" data-post-id="331539">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="absowoot" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/absowoot/120/27268_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  absowoot
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="heathen" data-post="32" data-topic="63580">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/heathen/48/2926_2.png" class="avatar"> heathen:</div>
<blockquote>
<p>something which will intercept specific messages from the frontend hooks and inject values into the socket. It’s just a basic abstract idea, I don’t fully understand how to get changes back to the LiveVue.</p>
</blockquote>
</aside>
<p>Not sure but see if this library does what you have in mind: <a href="https://github.com/nerdslabs/storex" rel="noopener nofollow ugc">storex</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331539" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580/33">Post #32</a>
	                </div>
	            </div>
              <div id="likers-container-331539" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331539"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #32"></div>
  </section>
</div>
    <div class="postbit" id="331540" data-post-id="331540">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="heathen" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/heathen/120/2926_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  heathen
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Looks interesting on the first glance, I have to dig it deeper. Thanks!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331540" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580/34">Post #33</a>
	                </div>
	            </div>
              <div id="likers-container-331540" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331540"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #33"></div>
  </section>
</div>
    <div class="postbit" id="331556" data-post-id="331556">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Jskalc" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Jskalc/120/35876_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Jskalc
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’m not exactly sure if I understand what you’re saying.</p>
<p>These are possible states:</p>
<ul>
<li>Server (socket) state - added by assigns</li>
<li>Client (Vue) state - added in setup(), eg. <code>const val = ref(123)</code></li>
</ul>
<p>Client state is divided into:</p>
<ul>
<li>Global state (pinia store or by using <code>const state = reactive({})</code> outside of Vue component and importing it)</li>
<li>Local component state</li>
</ul>
<p>Server state is also divided into <code>LiveView</code> state and <code>LiveComponents</code> state but I think it’s not that relevant now.</p>
<p>So then it all boils down to synchronizing that state across various places.</p>
<p>You’re covered with <code>Socket -&gt; Vue Component</code>. Simply pass props to <code>&lt;.vue&gt;</code> component and they’ll be synchronized. If you need it in multiple places, pass it to each. This could be optimized in the future but I want to make sure problem exists.</p>
<p>You’re also covered with <code>Vue Component -&gt; Socket</code>. The most direct solution is to use <code>useLiveVue().pushEvent(event_name, data, response_handler)</code> and implement <code>handle_event(event_name, params, socket)</code>. If you update assign passed to <code>&lt;.vue&gt;</code> it will be synchronized.</p>
<p>Remember you can return <code>{:reply, data, socket}</code> tuple from <code>handle_event</code> and <code>data</code> will be passed back to the frontend. That way you can treat LiveView as GenServer, which reacts to messages and can send back responses. Something like an API but with a persistent state underneath. I’m using it to generate LLM responses that are local to the frontend component and not needed at the server state.</p>
<p>What might be tricky is <code>prop drilling</code>. Since all the state is available at the root component you might need to pass it down possibly through multiple levels. That problem in the frontend world is solved either by global states (stores like Pinia) or providers (inject / provide in Vue).</p>
<p>Is it the problem you’re referring to? <img src="https://forum.elixirforum.com/images/emoji/apple/sweat_smile.png?v=15" title=":sweat_smile:" class="emoji" alt=":sweat_smile:" loading="lazy" width="20" height="20"> I’m looking for a concrete example what you’d like to accomplish.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331556" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580/35">Post #34</a>
	                </div>
	            </div>
              <div id="likers-container-331556" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331556"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #34"></div>
  </section>
</div>
    <div class="postbit" id="331609" data-post-id="331609">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cvkmohan" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cvkmohan/120/39944_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cvkmohan
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>LiveView is listing <code>Support for Web Components</code> in the road map post 1.0 release. That probably will solve quite a few things. Maybe the need for a UI library based on Functional Components will go away?<br>
I need a rich text editor integrated into the app. All good ones <code>Tiptap</code>, <code>Novel</code>, <code>Lexical</code> are having only React components for UI. I am a bit unsure if I have to go the full distance with <code>LiveVue</code> or <code>LiveSvelte</code> or just be comfortable with JS hooks.<br>
I guess finally it is a question of tradeoffs.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331609" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580/36">Post #35</a>
	                </div>
	            </div>
              <div id="likers-container-331609" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331609"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #35"></div>
  </section>
</div>
    <div class="postbit" id="332873" data-post-id="332873">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="zhangzhen" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/zhangzhen/120/7537_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  zhangzhen
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="Jskalc" data-post="22" data-topic="63580">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jskalc/48/35876_2.png" class="avatar"> Jskalc:</div>
<blockquote>
<p>We could get inspiration from <a href="https://inertiajs.com/" rel="noopener nofollow ugc">Inertia.js </a>, doing a similar thing for PHP / Ruby but without live updates.</p>
</blockquote>
</aside>
<p>is Inertia.js a drop-in replacement for projects like LiveVue, LiveSvelte?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="332873" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580/37">Post #36</a>
	                </div>
	            </div>
              <div id="likers-container-332873" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332873"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #36"></div>
  </section>
</div>
    <div class="postbit" id="332874" data-post-id="332874">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="KP123" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  KP123
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>The way I understand it LiveView uses your applications normal controllers to fetch data. Instead of building your pages in heex you’d render the page in vue, react, etc</p>
<p><a href="https://inertiajs.com/how-it-works" rel="noopener nofollow ugc">From the docs</a></p>
<blockquote>
<p>With Inertia you build applications just like you’ve always done with your server-side web framework of choice. You use your framework’s existing functionality for routing, controllers, middleware, authentication, authorization, data fetching, and more.</p>
<p>However, Inertia replaces your application’s view layer. Instead of using server-side rendering via PHP or Ruby templates, the views returned by your application are JavaScript page components. This allows you to build your entire frontend using React, Vue, or Svelte, while still enjoying the productivity of Laravel or your preferred server-side framework.</p>
</blockquote> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="332874" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580/38">Post #37</a>
	                </div>
	            </div>
              <div id="likers-container-332874" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332874"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #37"></div>
  </section>
</div>
    <div class="postbit" id="332876" data-post-id="332876">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="barkerja" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/barkerja/120/31186_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  barkerja
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="cvkmohan" data-post="36" data-topic="63580">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cvkmohan/48/39944_2.png" class="avatar"> cvkmohan:</div>
<blockquote>
<p>LiveView is listing <code>Support for Web Components</code> in the road map post 1.0 release.</p>
</blockquote>
</aside>
<p>Where is the roadmap is located? I was recently searching for one, but wasn’t able to locate it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="332876" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580/39">Post #38</a>
	                </div>
	            </div>
              <div id="likers-container-332876" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332876"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #38"></div>
  </section>
</div>
    <div class="postbit" id="332880" data-post-id="332880">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="KP123" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  KP123
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="barkerja" data-post="39" data-topic="63580">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/barkerja/48/31186_2.png" class="avatar"> barkerja:</div>
<blockquote>
<p>Where is the roadmap is located</p>
</blockquote>
</aside>
<p>I believe they’re referring to <a href="https://www.phoenixframework.org/blog/phoenix-liveview-1.0-released" rel="nofollow">this post</a> by Chris where he states</p>
<blockquote>
<p>Following the RC phase, we’ll be continuing efforts around collocated JavaScript hooks, Web Component integration, navigation guards, and more as outlined in our issue tracker.</p>
</blockquote> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="332880" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580/40">Post #39</a>
	                </div>
	            </div>
              <div id="likers-container-332880" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332880"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #39"></div>
  </section>
</div>
    <div class="postbit" id="339097" data-post-id="339097">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Jskalc" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Jskalc/120/35876_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Jskalc
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>A small update about the project. It’s still growing, both when it comes to adoption and features <img src="https://forum.elixirforum.com/images/emoji/apple/heart_eyes.png?v=15" title=":heart_eyes:" class="emoji" alt=":heart_eyes:" loading="lazy" width="20" height="20"></p>
<p>Recently I’ve added a roadmap to the readme of the project. I’m posting it here as well:</p>
<h2><a name="p-339097-roadmap-1" class="anchor" href="#p-339097-roadmap-1" aria-label="Heading link" rel="nofollow"></a>Roadmap <img src="https://forum.elixirforum.com/images/emoji/apple/bullseye.png?v=15" title=":bullseye:" class="emoji" alt=":bullseye:" loading="lazy" width="20" height="20"></h2>
<ul>
<li>Add a default handler for Vue emits to eg. automatically push them to the server without explicit <code>v-on</code> handlers.</li>
<li>try to use <a href="https://hexdocs.pm/igniter/" rel="noopener nofollow ugc">Igniter</a> as a way of installing LiveVue in a project</li>
<li><code>usePushEvent</code> - an utility similar to <a href="https://vueuse.org/core/useFetch/" rel="noopener nofollow ugc"><code>useFetch</code></a> making it easy to get data from <code>&amp;handle_event/3 -&gt; {:reply, data, socket}</code> responses</li>
<li><code>useLiveForm</code> - an utility to efforlessly use Ecto changesets &amp; server-side validation, similar to HEEX</li>
<li><code>useEventHandler</code> - an utility automatically attaching &amp; detaching <a href="https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks-via-phx-hook" rel="noopener nofollow ugc"><code>handleEvent</code></a></li>
<li>optimize payload - send only <a href="https://hexdocs.pm/jsonpatch/readme.html" rel="noopener nofollow ugc"><code>json_patch</code></a> diffs of updated props</li>
<li>VS code extension higlighting <code>~V</code> sigil</li>
</ul>
<h2><a name="p-339097-useliveform-2" class="anchor" href="#p-339097-useliveform-2" aria-label="Heading link" rel="nofollow"></a>useLiveForm</h2>
<p>I’m working currently on the early version of useLiveForm utility. I’ve posted more details on Twitter, you can find it <a href="https://x.com/jskalc/status/1831985597604393037" rel="noopener nofollow ugc">here</a>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="339097" data-batch-url="/posts/batch_likers">
                        9
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580/41">Post #40</a>
	                </div>
	            </div>
              <div id="likers-container-339097" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="339097"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #40"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/63580/load_more?page=5">Load more posts (4 remaining)</a>
</div></template></turbo-stream>