# Using LiveView with AlpineJS

**URL:** <https://forum.elixirforum.com/t/using-liveview-with-alpinejs/32797>\
**Category:** Blog Posts\
**Tags:** phoenix, javascript, tba-blog-post, javascript-frameworks, liveview, alpinejs\
**Created:** [July 2, 2020, 4:53pm UTC](https://forum.elixirforum.com/t/using-liveview-with-alpinejs/32797 "2020-07-02T16:53:23Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![sreyansjain](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sreyansjain/32/16464_2.png) [@sreyansjain](https://forum.elixirforum.com/u/sreyansjain)\
**Post date:** [July 27, 2020, 5:25am UTC](https://forum.elixirforum.com/t/using-liveview-with-alpinejs/32797/6 "2020-07-27T05:25:05Z")

</div>

I was trying to integrate Apline and Phoenix LiveView and your blog posts have been of great help. Thank you for sharing your knowledge with us.

I have a question, what if we have multiple components on a page that want to register for Alpine Hook.

For ex

```javascript
Hooks.Counter = {
  mounted() {
    window.counterHook = this
  },
  decrement() {
    this.pushEvent('decrement', {})
  },
  increment(selector) {
    this.pushEventTo(selector, 'increment', {})
  }
}

```

**How do you create uniqueness above?**

So i tried to do CustomEvent dispatch and get the push\_element. This works -

```html
<div x-data @push-element-updated="console.log('captured custom event')">
    <div id="test_tb_<%= @id %>" phx-hook="EscapeHook">
  </div>

```

```javascript
Hooks.EscapeHook = {
  mounted() {
    console.log("mounted escape hook")
    let main_this = this;
    var event = new CustomEvent('push-element-updated', {
      bubbles: true,
      detail: {
        push_element: main_this
      }
    });
    console.log("event dispatched =======")
    this.el.dispatchEvent(event);
  }
}

```

But the above doesn’t work when the EscapeHook element is put inside a conditional. For ex -

```html
<%= if @is_being_edited do %>
<div x-data @push-element-updated="console.log('captured custom event')">
    <div id="test_tb_<%= @id %>" phx-hook="EscapeHook">
  </div>
<% end %>

```

How can we make it work inside a conditional?

Thank you once again for taking the time to enlighten us all.

---

_[View the full topic](https://forum.elixirforum.com/t/using-liveview-with-alpinejs/32797)._