How to use jQuery with Laravel and Vite

How to use jQuery with Laravel and Vite

Written by Kim Hallberg on Sep 26th, 2022 ・ Views ・ Report Post

Kim Hallberg Visit User Profile

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.

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. 
@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.

What about DataTables?

I have also included a branch going over how to add DataTables, called? You guessed it - datatables. Since there is no write-up for it you'll have to read it commit by commit.

Til next time, have a great day. 👋

Comments (0)