Skip to content
Toolbelt

Installation

There are two ways to install Toolbelt. In either case, it might be helpful to read through how installation works for Alpine core. The following guide skips some details that are already covered in Alpine’s documentation.

From a script tag

The easiest way to install Toolbelt is to include its CDN link. Because Toobelt is an Alpine plugin, you will have to include Alpine as a dependency. In addition, the Focus plugin is a required dependency for Toolbelt. Notice that Toolbelt and Alpine plugins come before Alpine core.

  1. Include the following script tags in your <head>:

    <head>
      <!-- Toolbelt -->
      <script
        src="https://cdn.jsdelivr.net/npm/@upstatement/toolbelt@1.0.0-alpha.1/dist/plugin.cdn.js"
        defer
      ></script>
    

      <!-- Focus plugin (Toolbelt dependency) -->
      <script
        src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.14.7/dist/cdn.min.js"
        defer
      ></script>
    

      <!-- Alpine core -->
      <script
        src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.7/dist/cdn.min.js"
        defer
      ></script>
    </head>

  2. You can now use Toolbelt components in your markup. Make sure to read through Using the Components before proceeding.

As a module

If you prefer bundling Toolbelt and its dependencies in your own Javascript bundle, you can install these packages from the npm registry.

  1. Install the following packages:

    Terminal window
    npm install alpinejs @alpinejs/focus @upstatement/toolbelt

  2. Import and initialize the packages like so:

    import Alpine from "alpinejs";
    import focus from "@alpinejs/focus";
    import toolbelt from "@upstatement/toolbelt";
    

    window.Alpine = Alpine;
    

    Alpine.plugin(toolbelt);
    Alpine.plugin(focus);
    

    Alpine.start();

  3. You can now use Toolbelt components in your markup. Make sure to read through Using the Components before proceeding.