How to use jQuery with Laravel and Vite
Tags: jquery, laravel, vite
Published: 2023-01-09 22:25:03

---
title: How to use jQuery with Laravel and Vite
published: true
date: 2022-09-26 22:03:32 UTC
tags: jquery, laravel, vite
canonical_url: https://devdojo.com/thinkverse/how-to-use-jquery-with-laravel-and-vite
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lz8zqfu1ato4ca2fry2.png
---

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](https://www.npmjs.com/) 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](https://laravel.com/docs/9.x/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/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](https://github.com/thinkverse/laravel-vite-and-jquery) repository and can be stepped through commit by commit.

Til next time, have a great day. 👋