use jquery with astro | Astro Lounge | Page 1

solid sleet Nov 8, 2025, 7:48 PM

#

Hi Kapa. I've never used jquery. Can you let me know if it can be used with astro and if so then how?

austere vectorBOT Nov 8, 2025, 7:48 PM

#

Hi @solid sleet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, you can use jQuery with Astro. The official Astro documentation mentions that jQuery can be used as a rendering library to dynamically update sections of a page, especially in combination with Astro's page partials. Partials allow you to serve fragments of HTML that can be loaded dynamically on the client side using libraries like jQuery, htmx, or Stimulus. This is an advanced feature and is typically used for dynamic content updates without a full page reload.

Here’s a summary of how you might use jQuery with Astro:

Include jQuery in your project:
You can add jQuery via a CDN in your HTML, typically in the <head> or just before the closing </body> tag.
```
<script src="<https://code.jquery.com/jquery-3.6.0.min.js"></script>>
```
Use jQuery to fetch partials:
You can use jQuery’s AJAX methods to fetch partial HTML from your Astro partial endpoints and inject it into your page. For example:
```
<button id="load-partial">Load Partial</button>
<div id="partial-container"></div>
<script>
  $('#load-partial').on('click', function() {
    $('#partial-container').load('/partials/clicked/');
  });
</script>
```
In this example, /partials/clicked/ would be an Astro partial page exporting export const partial = true; and returning the HTML fragment you want to inject.
Caveats:
- Partials should not contain scoped styles or scripts, as these will be stripped from the HTML output.
- This approach is intended for developers comfortable with low-level JavaScript or using a front-end library like jQuery.

For more details, see the Astro documentation on page partials.

#

Additionally, there is an astro-jquery integration available, which may help streamline using jQuery in your Astro project, though the official documentation does not provide details on its usage or features. You can explore it further if you need more advanced integration features beyond what’s described above<source><https://astro.build/integrations/46/</source>.>

In summary:

Yes, you can use jQuery with Astro, mainly for dynamic content updates using partials and client-side scripts.
Include jQuery via CDN and use it as you would in any HTML project, keeping in mind the limitations and best practices described in the Astro documentation<source><https://docs.astro.build/en/basics/astro-pages/#page-partials</source>.>

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@solid sleet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

solid sleet Nov 8, 2025, 8:58 PM

#

@austere vector I installed jquery through npm. I tried this code:
<script>
$('body').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 0.04,
})
</script>

I am getting Uncaught ReferenceError: $ is not defined

austere vectorBOT Nov 8, 2025, 8:58 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

The error Uncaught ReferenceError: $ is not defined means that jQuery ($) is not available in the browser when your script runs. When you install jQuery via npm and import it in your Astro project, you need to ensure that it is actually loaded on the client side before you use it.

Key points from the Astro documentation:

To use client-side JavaScript (like jQuery), you should place your code inside a <script> tag in your Astro component template.
If you want to use npm packages like jQuery in your client-side scripts, you need to import them properly in the script, and Astro will bundle them for you.

Example from the docs (using another npm package):

<script>
  import confetti from 'canvas-confetti';
  // ...use confetti here
</script>

If you use a <script is:inline>, you cannot use ESM imports, and the script will not be bundled or processed by Astro, so npm packages won't be available in that context<source><https://docs.astro.build/en/guides/client-side-scripts/#_top</source>.>

How to fix your code:

Import jQuery in your script:

<script>
  import $ from 'jquery';
  $('body').ripples({
    resolution: 512,
    dropRadius: 20,
    perturbance: 0.04,
  });
</script>

This way, Astro will bundle jQuery and make $ available in your script.

If you use a jQuery plugin (like ripples), you may also need to import it:

<script>
  import $ from 'jquery';
  import 'jquery.ripples';
  $('body').ripples({
    resolution: 512,
    dropRadius: 20,
    perturbance: 0.04,
  });
</script>

#

Summary:
You must import jQuery from npm in your <script> tag for it to be available as $. Do not rely on global variables unless you include jQuery via a CDN in your HTML. For npm-installed jQuery, always use ESM imports in your Astro component scripts<source><https://docs.astro.build/en/guides/client-side-scripts/#_top</source>.>

If you still have issues, make sure you are not using the `is:inline` directive, as that disables Astro's bundling and import processing for the script<source><https://docs.astro.build/en/reference/directives-reference/#isinline</source>.>

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@solid sleet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

solid sleet Nov 8, 2025, 8:59 PM

#

oh

solid sleet Nov 8, 2025, 11:24 PM

#

@austere vector
Hi again. I decided to use a different jquery package. It wants me to install the package with a CDN:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

This is an example configuration for it:
$(document).ready(function() {
$('body').ripples({
resolution: 512,
dropRadius: 30,
perturbance: 0.1,
interactive: true
});
});

Where would I add that configuration?
I installed it like this: <script
is:inline
src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js'></script>

austere vectorBOT Nov 8, 2025, 11:24 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

To use a jQuery plugin that requires jQuery from a CDN in your Astro project, you should:

Include the jQuery CDN script in your component or page using a <script is:inline src="..."></script>.
Include the plugin’s CDN script (if it’s a separate file) in the same way.
Add your configuration code (the $(document).ready(...) block) in a separate <script is:inline> tag after both scripts have loaded.

Example:

---
--- 
<!-- 1. jQuery CDN -->
<script is:inline src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>>
<!-- 2. Plugin CDN (replace with actual plugin URL if needed) -->
<script is:inline src="<https://cdn.jsdelivr.net/npm/jquery.ripples/dist/jquery.ripples-min.js"></script>>
<!-- 3. Your configuration -->
<script is:inline>
  $(document).ready(function() {
    $('body').ripples({
      resolution: 512,
      dropRadius: 30,
      perturbance: 0.1,
      interactive: true
    });
  });
</script>

Important notes from the Astro documentation:

When you use <script is:inline src="...">, Astro does not process or bundle these scripts—they are included as-is in your HTML, and you must ensure the order is correct so that jQuery loads before your plugin and your configuration code runs after both are available<source><https://docs.astro.build/en/guides/client-side-scripts/#load-external-scripts</source>.>
The is:inline directive is required for external scripts loaded from a CDN<source><https://docs.astro.build/en/guides/client-side-scripts/#load-external-scripts</source>.>
Your configuration <script is:inline> must come after the CDN scripts so that $ is defined when it runs.

#

This approach matches the usage described in the Astro documentation for loading and using external scripts from a CDN.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@solid sleet Kapa.ai is still learning and improving, please let me know how I did by reacting below.

solid sleet Nov 8, 2025, 11:28 PM

#

im messing this all up

solid sleet Nov 9, 2025, 12:11 AM

#

@austere vector does this look ok?
<script is:inline src='https://code.jquery.com/jquery-3.7.0.min.js'></script>
<script is:inline src='/src/jquery.ripples.js'></script>

$('body').ripples({
  resolution: 512,
  dropRadius: 30,
  perturbance: 0.1,
  interactive: true,
})

})
</script>

austere vectorBOT Nov 9, 2025, 12:11 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

Your code structure is correct according to Astro’s documentation for including external scripts via CDN and using inline configuration scripts. Here’s a review based on the official guidance:

Using <script is:inline src="..."> is the correct way to include external scripts from a CDN or from your public directory.
The order of your scripts is important: jQuery must be loaded before the plugin, and both must be loaded before your configuration script.
Your configuration script is placed after both dependencies, which is correct.

However, there is one potential issue:
If /src/jquery.ripples.js is inside your src/ directory, it will not be served as a static file. Only files in the public/ directory are accessible via absolute paths in the browser. You should move jquery.ripples.js to the public/ directory and reference it as /jquery.ripples.js instead.

Corrected example:

<script is:inline src="<https://code.jquery.com/jquery-3.7.0.min.js"></script>>
<script is:inline src="/jquery.ripples.js"></script>
<script is:inline>
  $(document).ready(function () {
    console.log($.fn.ripples);

    $('body').ripples({
      resolution: 512,
      dropRadius: 30,
      perturbance: 0.1,
      interactive: true,
    });
  });
</script>

Summary:

Your approach is correct, but make sure all CDN or static files are referenced from the public/ directory, not src/<sup>source</sup>.
The order of scripts is correct.
Your configuration code is in the right place.

#use jquery with astro

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you still have issues, make sure you are not using the `is:inline` directive, as that disables Astro's bundling and import processing for the script<source><https://docs.astro.build/en/reference/directives-reference/#isinline</source>.>

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This approach matches the usage described in the Astro documentation for loading and using external scripts from a CDN.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you follow these adjustments, your setup should work as expected in Astro.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#use jquery with astro

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you still have issues, make sure you are not using the is:inline directive, as that disables Astro's bundling and import processing for the script<source><https://docs.astro.build/en/reference/directives-reference/#isinline</source>.>

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

This approach matches the usage described in the Astro documentation for loading and using external scripts from a CDN.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you follow these adjustments, your setup should work as expected in Astro.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you still have issues, make sure you are not using the `is:inline` directive, as that disables Astro's bundling and import processing for the script<source><https://docs.astro.build/en/reference/directives-reference/#isinline</source>.>