jQuery is one of the OG JavaScript libraries still in heavy use in the Laravel community to this day. It was a breeze to add with Laravel Mix, but since Laravel v9.2.0 Vite is now the default and a lot of users have had trouble getting it to work.
Fret not, because in this post we will go over how to install it, import it, and how to use it with Laravel 9 and Vite.
Installing jQuery
jQuery is installed with a single command from your terminal using your preferred node package manager. We will use npm in this post.
Travel to the root of your Laravel application and run the following command.
npm install jquery --save-dev
We use the --save-dev flag since Laravel added all its node dependencies as development dependencies by default, so why not follow their lead?
Importing jQuery
Now that we have jQuery installed, we will import it in our bootstrap.js file. That's where Laravel imports its dependencies, so again, why not do the same? We can import jQuery anywhere really, but for this example, we will add it below the lodash import.
import $ from 'jquery';
window.$ = $;
We will also add jQuery to the window object. This will be useful for when we need to access jQuery directly in a Blade file.
This step is optional though, if you never intend on using jQuery directly in a Blade file and plan to use it in your app.js file only, then there is no need to add it to the window object.
Using the Vite directive
Now jQuery is installed and imported, but we still won't have access to it in our application. For that, we need to load our app.js script using the @vite Blade directive.
@vite('resources/js/app.js')
For this simple example, we are only loading our app.js asset. If you want to load your app.css asset as well, then you will have to use an array and load both.
@vite(['resources/css/app.css', 'resources/js/app.js'])
For more information, I recommend you read Laravel's documentation on Asset Bundling with Vite.
Using jQuery?
We now have jQuery installed, imported, and loaded in our application. But how do we actually use it? Before we could access jQuery using the $ in a blocking inline <script> tag.
If you try to do that now, it will result in the following console error.
Uncaught ReferenceError: $ is not defined
So how do we prevent this from happening? It's rather simple, the first thing you need to understand is a bit about how browsers load JavaScript. Specifically how it loads JavaScript modules, because that is how Laravel loads JavaScript with Vite.
JavaScript modules are deferred by default. So a blocking inline script tag, even added at the bottom of your <body> is executed before your JavaScript modules.
Since the browser hasn't loaded in the app.js module yet, jQuery hasn't yet been added to the window object, so trying to access it before that results in the reference error.
jQuery and Inline Scripts
So you might think that we cannot use jQuery with inline scripts. We can, the only difference from before is that now your inline <script> tag also needs to be a JavaScript module. By doing that, we fix the loading issue.
Add the following line in your welcome.blade.php view, somewhere after your @vite directive call.
<script type="module">
$('body').html('<h1>Hello World!</h1>');
</script>
Now when we load our landing page, we should see the words - Hello World!
jQuery and App.js
What if you want to access jQuery in your app.js file? We can use the $ in there as well, and we can demonstrate that with this little snippet.
$(() => {
setTimeout(() => {
alert('jQuery triggered via app.js')
}, 2500);
});
If you've ever wanted to test some JavaScript this might look familiar. This simple snipper sets a timer that when finished triggers an alert.
Finishing up
If you've followed along we now have two jQuery calls, that both demonstrate accessing jQuery in different situations. If you now build your assets, with the following command.
npm run build
And access the site, you will see the default Laravel landing page disappear and be replaced with Hello World! , and after about 2 seconds the alert should pop up.
Conclusion
Now you know how to install, import, and access jQuery with Larvel and Vite. 🎉
As always, the finished code is available on my GitHub in the laravel-vite-and-jquery repository and can be stepped through commit by commit.
Til next time, have a great day. 👋
Top comments (0)