Skip to main content
whitep4nth3r logo

28 Sep 2023

2 min read

How to use jQuery with Astro

Understanding how to use jQuery in an Astro project was hard to Google. So I wrote my own guide for you and my future self.

Since it’s alpha release in 2021, Astro is an open source web framework that has been growing steadily in popularity. One of the unique selling points of Astro is that you can “bring your own UI library”, giving you the ability to use React, Preact, Vue, SolidJS, Svelte and more — all within a single Astro project — or even a single file!

However, jQuery is still the most popular and most used JavaScript library on the web. And it was my first taste of writing JavaScript for the browser back in 2014 (yes, before I learned plain JavaScript syntax, don’t hate).

And without a jQuery integration for Astro guide available (yet), I wanted to see if I could use jQuery in an Astro project. “Why, Salma, why?” I hear you cry. Well, why not? Even Astro co-creator Matthew Phillips loves jQuery.

Use the is:inline template directive

By default, Astro processes, optimises and bundles any <script> tags that it finds in a layout, page or component file. Initially, I tried installing the jQuery package via npm, and importing it inside a script tag. But given the import was bundled up by Astro, the good old jQuery $ wasn’t able to initialise and get access to the window object and DOM. I also found a highly experiment jQuery integration for Astro that… just didn’t work at all 🙃.

You might be familiar with adding jQuery to an HTML file using a <script> tag referencing the minified source code from the jQuery CDN or a local file. We can achieve this in Astro by preventing the bundling of the jQuery import by adding the is:inline directive to <script> tags in layout, page or component files. This is also really useful to know if you want to interact with elements on the page using plain JavaScript even without jQuery.

To use jQuery in an Astro project, you can choose to reference the minified source code from the CDN, or download the source code to the public folder of your project, and reference it from there.

<script is:inline src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

Using jQuery in Astro components and pages

If you choose to import jQuery to a layout file, you’re free to use jQuery syntax in your page and component files using a <script> tag with the is:inline directive — or let Astro bundle and optimise the code by omitting the directive. Like so:

<script is:inline>
$("button").on("click", () => {console.log("Button clicked!")});
</script>

<!-- or if you want the code bundled and optimised -->

<script>
$("button").on("click", () => {console.log("Button clicked!")});
</script>

jQuery is great!

That’s it. That’s the headline. Read more about the is:inline directive on the official Astro documentation.

Like weird newsletters?

Join 262+ subscribers in the Weird Wide Web Hole to find no answers to questions you didn't know you had.

Subscribe

Salma is looking at you, with a rather large smile. She's pointing across herself up to her left, with a very tatooed arm. She's wearing a black shirt and black rimmed glasses.

Salma Alam-Naylor

I'm a live streamer, software engineer, and developer educator. I help developers build cool stuff with blog posts, videos, live coding and open source projects.

Related posts

12 Jun 2022

How to deploy an Astro site

Deploy an Astro project as a static, server-rendered, or edge-rendered site, try out some Netlify templates, and learn how to deploy to Netlify.

Tutorials 9 min read →

3 Oct 2022

I changed my mind about writing new JavaScript frameworks

Maybe you should write a new JavaScript framework. And here’s why.

JavaScript 4 min read →