Add a self hosted alpine.js file with Laravel
Laravel by default uses a CDN to load alpine.js. That can be a problem in regard of GDPR. To self host the alpine.js file, you have to install alpines:
npm i alpinejs
There is something special with alpine.js - it must not be loaded before LiveWire initializes. That’s why we put alpine.js in a separate file, so that we can add defer
to the script tag. To do so, add a resources/js/alpine.js file with this content:
import 'alpinejs'
Next step is to add the alpine.js file to webpack.mix.js. To do that, you have to add this to the end of the file:
mix.js('resources/js/alpine.js', 'public/js')
.webpackConfig(require('./webpack.config'));
Last step is to include the script in your templates <head>
tag:
<script src="{{ asset('js/alpine.js') }}" defer></script>
When you now run npm run prod
, an alpine.js file is created in your public folder and everything should work as expected.
Related Posts
- Add self hosted Google Fonts to your Laravel App
- Install Sentry on Ubuntu 18.04 Using Nginx and Let's Encrypt Certificates
- Use Google Fonts Locally With GeneratePress
- Fix "Failed to get metadata: Local: Broker transport failure" When Updating Sentry
- Enable Asset Caching When Using Laravel
- Tutorial: Ubuntu 18.04 LAMP Setup for WordPress