4 Easy Ways to Add Alpine.JS to Laravel

Alpine.JS is a popular lightweight JavaScript framework used to create interactive and reactive web interfaces.

In this post, we will discuss four methods to easily add Alpine.JS to Laravel, including directly from the public folder, loading from a CDN URL, loading using Vite, and loading using Laravel Mix.

Let’s get started!

Method 1: Loading Alpine.JS From a CDN URL

This method is useful when you want to load Alpine.JS from a CDN. Simply add the following code to the head section in your blade file:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

You can easily test that Alpine.JS works correctly by using this blade code, which makes a dynamic counter based on the example from the Alpine.JS documentation:

Animated GIF Showing a Counter That Increments on Click

The code to make this example in Laravel blade:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laracoding.com Alpine.JS example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column">
                    <h1 class="title">Counter demo</h1>
                    <div class="field">
                        <label class="label">Click to increment</label>
                        <div class="control">
                            <div x-data="{ count: 0 }">
                                <button x-on:click="count++" class="button is-link">Click me</button>
                                <span x-text="count"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Method 2: Including Alpine.JS Directly From the /public Folder

This is the simplest method of adding Alpine.JS to Laravel. Follow the steps below:

  1. Download Alpine.JS from jsdelivr
  2. Copy the cdn.min.js file to the public/js folder of your Laravel application.
  3. Add the following code to the head section of your blade file:
<script defer src="{{ asset('js/cdn.min.js') }}"></script>

Method 3: Loading Alpine.JS Using Vite (Laravel 9,10)

Vite is a build tool for modern web applications. Laravel 9 and 10 have in-built support for Vite. Follow the steps below to add Alpine.JS using Vite:

  1. Install Alpine.JS using NPM by running the following command:
npm install alpinejs
  1. Create a new file named app.js in the resources/js folder of your Laravel application.
  2. Add the following code to app.js:
resources/js/app.js
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
  1. Add the following code to the head section of your blade file.
@vite(['resources/js/app.js'])

Method 4: Loading Alpine.JS Using Laravel Mix (Laravel 5,6,7,8)

Laravel Mix is a wrapper around the popular Webpack module bundler. Follow the steps below to add Alpine.JS using Laravel Mix:

  1. Install Alpine.JS using NPM by running the following command:
npm install alpinejs
  1. In your Laravel application, open the webpack.mix.js file.
  2. Add the following code to the file:
mix.scripts([
    'node_modules/alpinejs/dist/cdn.js'
], 'public/js/alpine.js').version();
  1. Run the following command to compile your assets:
npm run prod
  1. Add the following code to the head section of your blade file:
<script src="{{ mix('js/alpine.js') }}"></script>

Conclusion

In this post, we have discussed four methods to easily add Alpine.JS to Laravel. You can use any of these methods based on your preference and project requirements.

The first two methods are the simplest, but the last two methods are more powerful and provide additional features such as code bundling, minification, and source maps.

Choose the method that best suits your needs and start building awesome interactive web interfaces with Alpine.JS and Laravel.

Now go ahead and add Alpine to your application and create something great. Happy coding!

Johan van den Broek

Johan is the creator of laracoding.com. As a child, he began tinkering with various programming languages, many of which have been long forgotten today. Currently, he works exclusively with PHP and Laravel, and his passion for programming remains to this day.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts