Why doesn't Alpine.js work properly

sage
1

I’m pretty new to Roots. Loving it so far, but I can’t seem to figure some very basic things out at the same time.

I’m trying to get Alpine.js to work/load with my fresh Sage theme. I’ve only done three things to a default sage10 install:

yarn add alpinejs

I then added import 'alpinejs'; to resources/scripts/app.js.

Next, I created a trivial example to see if it’s working:

I added to resources/views/partials/header.blade.php:

<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button> 
    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>

I was under the impression that it would work and it did not.

I tried to restart yarn start. Ran yarn && yarn build. Nothing, no luck.

What is it that I’m missing?

EDIT: It might have something to to with adding a defer attribute to the script tags, but I’m not sure how to do that either. Any help would be greatly appreciated.

1 Like
2

Any JavaScript errors in console when loading the page?

3

I would recommend following Alpine’s instructions for how to install it as a module:
https://alpinejs.dev/essentials/installation#as-a-module

3 Likes
4

Ah, yes, thank you so much. I’m so new to all this I easily miss things like this. This is indeed the correct solution.

5

A follow-up to that, if I follow the Alpine.js instructions it works great, but curiously I still can’t remove jQuery!

Here are the lines from app/setup.php:

/**
 * Register the theme assets.
 *
 * @return void
 */
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ['jquery'], null, true);
    wp_enqueue_script('sage/app.js', asset('scripts/app.js')->uri(), ['sage/vendor.js'], null, true);

    wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');

    if (is_single() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }

    wp_enqueue_style('sage/app.css', asset('styles/app.css')->uri(), false, null);
}, 100);

It would appear remove that first wp_enqueue_script() would be part of removing jQuery (along with in webpack.mix.js and in app.js), but this is not correct. When removing that first function call it completely removes all JavaScript from the site. Why doesn’t app.js still load?

I’d appreciate any insight. I’m still fumbling around trying to get this to work.

My end goal is to completely remove jQuery from the frontend and enable Alpine.js

6

Also can anyone explain what this line does?

wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
7

app.js declares vendor.js as a dependency, as you can see above. If the dependency is unavailable (you removed it) then app.js can’t enqueue.

8
9

Ah, I see, so if I change [‘jquery’] to null (?) in the first call, it does work, but I still don’t really understand what is going on here. Where/what is vendor.js? Is that something I can learn about via the webpack or Laravel Mix docs?

Will I need to enqueue both vendor.js and app.js to get Alpine to load?

1 Like
10

This topic was automatically closed after 42 days. New replies are no longer allowed.