0

Context:

  • I am using Laravel 8 with Livewire.
  • Alpine.js is installed via npm in my package.json:
    "devDependencies": {
    "alpinejs": "^3.15.2"
}

I am not using a CDN for Alpine.js. My layout includes the CSS and JS like this:

<!-- Layout config JS -->
<script src="{{ URL::asset('build/js/layout.js') }}"></script>

<!-- Bootstrap CSS -->
<link href="{{ URL::asset('build/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />

<!-- Icons CSS -->
<link href="{{ URL::asset('build/css/icons.min.css') }}" rel="stylesheet" type="text/css" />

Problem: Whenever I try to use x-data or other Alpine.js directives in my Livewire components, I get the Alpine is not defined error.

What I tried:

  • Checked if alpinejs is installed via npm.
  • Verified that node_modules is present.
  • Tried including Alpine.js via CDN (worked, but I want to use npm).

Questions:

  • How can I properly load Alpine.js when using Laravel Livewire without a CDN?
  • Do I need to compile my assets with Laravel Mix / Vite to make Alpine available?
Improve this question
3
  • this guide mentions you need to import it in your javascript entrypoint (probably app.js) and then expose it in the window object Commented Nov 25 at 20:43
  • By default, you don't need to install AlpineJs with Livewire 3: it includes AlpineJs by default when needed and downloads it from a CDN. Commented Nov 25 at 22:18
  • Have you attempted using @livewireScripts in your layout to manually/force the script to load? Commented Nov 25 at 23:23
Related questions
0
Default AlpineJS installation in sail livewire project
6
Why css and bootstrap is not loading in Laravel 5.3?
0
Uncaught ReferenceError: $ is not defined Laravel 8 livewire
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.