Bootstrapping Alpine via Bundle 🤝

Alpine can be bootstrapped with ease using a local module.

Note that if you are trying out Bundle in a project that already uses Alpine there is no need for this. You can start using imports inside your components immediately, with zero config

First make sure you have path rewriting set up. Then install Alpine.

npm install alpinejs

Then create a new file resources/js/bootstrap/alpine.js

import Alpine from "alpinejs";

export default (() => {
  window.Alpine = Alpine;

  Alpine.start();
})();

That’s it! 🤟

<x-import module="~/bootstrap/alpine" init />

<div x-data="{ message: 'Hello World!' }">
  <h1 x-text="message"></h1>
</div>

Since the @once directive is added internally you are safe to use these imports in multiple blade components. Only the first one will be rendered.

Because of this you are able to create Alpine/Blade components with composable JS dependencies. For example, a calendar input may include imports for both Alpine & fullcalendar.js, regardless if those are used elsewhere on the page.

This opens up a whole new dimension to fully portable Blade components! But use with care. Shared dependencies are not chunked.

Plugins

A plugin can be added with ease via your bootstrap module.

import Alpine from "alpinejs";
import collapse from "@alpinejs/collapse";

Alpine.plugin(collapse);

export default (() => {
  window.Alpine = Alpine;

  Alpine.start();
})();

Using modules in AlpineJS

A perfect pairing! Using Bundle in AlpineJS is as easy as using it in an inline script.

Since Alpine’s x-init directive is async by default Alpine & Bundle work seamlessly together.

<x-import module="tippy.js" as="tippy" />

<button
  x-init="
    let tippy = await _import('tippy')

    tippy($el, {
        content: 'Hello World!',
    });
  "
>
  Show tooltip
</button>

You can also use the _import function in the x-data object. This requires you make the funcion _import is invoked from async.

<x-import module="tippy.js" as="tippy" />

<button
  x-data="{
    async init() {
        let tippy = await _import('tippy')

        tippy($el, {
            content: 'Hello World!',
        });
    }
}"
>
  Show tooltip
</button>

You can also import a module right inside a Alpine listener. For example:

<x-import module="sweetalert" as="swal" />

<button
  x-on:click="
    let swal = await _import('swal')
    swal('Hello world!');
  "
>
  Trigger Sweetalert dialog
</button>

Roadmap

There are a couple of cool ideas in the pipe. One of them is backed Alpine components. It would be incredible if this feature is possible in the future 🤞