adrema/resources/livewire-js/app.js

import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
import Tooltip from '@ryangjchandler/alpine-tooltip';

import '../css/app.css';
import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/shift-toward.css';
import '../css/tooltip.css';
import {error, success} from './toastify.js';
import tippy from 'tippy.js';

const defaultTippy = {
    theme: 'primary',
    animation: 'shift-toward',
};

Alpine.plugin(Tooltip.defaultProps(defaultTippy));

window.addEventListener('success', (event) => success(event.detail[0]));

document.addEventListener('alpine:init', () => {
    Alpine.directive('error', function (el, {value, modifiers, expression}, {Alpine, effect, cleanup, evaluateLater}) {
        let getThingToLog = evaluateLater(expression);

        // el._x_custom_tippy = new tippy(el, {
        //     ...defaultTippy,
        //     content: '',
        // });

        effect(() => {
            getThingToLog((thingToLog) => {
                console.log(thingToLog);
            });
        });
    });
});

window.tippy = tippy;

Livewire.start();