Tailwind Element component disappears after Phoenix LiveView socket connection

Phoenix Forum Questions / Help
, ,
1

Hello all,

I am new to Phoenix and web development (but love both of them).

I am writing a toy application and decided to use https://tailwind-elements.com that provides me with some cool components.

I successfully managed to install the library and use it in my app.
However, I encountered a small issue and I have some difficulties to fix it. Maybe you could give me a hand! :slight_smile:

The issue is the following. I am working within a LiveView, and use the video carousel basic example from Tailwind CSS Video Carousel / Gallery - Free Examples. Once the LiveView’s socket is connected, the carousel disappears. If I remove the line liveSocket.connect(); from my app.js then everything works fine.

Do you have any idea ?

Thank you in advance !

Best

2

I’m not too sure how the library works, but you should be able to use a phx-hook for this, something like:

# app.js
import {Carousel, initTE} from 'tw-elements'

const Hooks = {}
Hooks.Carousel = {
  mounted() {
    initTE({ Carousel })
  }
}

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})

<div
  id="carouselExampleCaptions"
  phx-hook="Carousel"
  class="relative"
  data-te-carousel-init
  data-te-ride="carousel">
1 Like
3

Thank you, it works perfectly with the phx-hook.