How To Install And Use Alpine Js In Laravel 8

Hello Artisan,

In this Laravel alpine js tutorial, I will show you how to set up alpine js in the Laravel 8 application. We can set up alpine js in two ways in our laravel application. One is using CDN and the other is from npm or yarn.

Install alpine js via CDN in Laravel 8 application:

Install alpine js via npm in Laravel 8 application:

yarn add alpinejs

// for npm
npm install alpinejs

Then update below file like:

webpack.mix.js

mix.js('resources/js/alpine.js', 'public/js');

Keep in mind that in order to initialize Alpine Js version 3 you have to call the Alpine.start() like below:

resources/js/alpine.js

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Now we can run run watch or compile it to production with yarn prod

yarn watch
yarn prod

Now all are set to go. Don't forget to reference the javascript in your blade views.

master.blade.php

Read also: Complete Beginners Guide on Laravel Livewire Events

Hope this how to install Alpine js in Laravel 8 tutorial will help you to set up alpine js in Laravel.