7

I want to use window or document to return path of the current page default Astro.site.pathname isn't working right or proper documentation isn't available.

My question is how to use document or window properly in Astro JS?

Thanks in advance!

1
  • 1
    Please note that is:inline is not needed and have unexpected drawbacks, see answer with simple <script>
    – wassfila
    Dec 18, 2022 at 12:17

4 Answers 4

10

You need to write the script inside <script is:inline></script> if you want to use things like window or document. This way Astro won't touch your JS and include it directly on the HTML. The JS positioned on the top of the page between --- --- will be executed at build time.

3
  • 2
    While this is the accepted answer, it is worth noting is:inline is not required here. See stackoverflow.com/a/74839926/3829557 for more details. Dec 18, 2022 at 13:52
  • @swithinbank I needed it in my Vue component though... <script lang="ts" setup is:inline >
    – Manfred
    Jan 9 at 11:10
  • I don’t believe is:inline has any impact in Vue components, it’s a syntax only used in .astro files. Jan 9 at 13:04
8

You can also access the current path name from an Astro component using const { pathname } = Astro.url.

0
5

By default, Astro will process, optimize, and bundle any and tags that it sees on the page. You can opt-out of this behavior with the is:inline directive.

Docs

You can use the is:inline directive like so in your .astro components:

---
// static build only
---

<script is:inline>
    console.log(document, window)
</script>
5

Script tag

<script> tag as mentioned in the documentation is enough for using document and window as it is meant for client side Javascript

https://docs.astro.build/en/guides/client-side-scripts/#using-script-in-astro

Inline Script

<script is:inline> is not recommended if you do not need it because it's intended to avoid bundling your script, which is rarely needed. And if you use the component containing that script, in let's say 10 instances (e,g, 10 Cards), you'll have that script 10 times duplicated, so results in loading performance impact.

https://docs.astro.build/en/guides/client-side-scripts/#script-bundling

Example

This example shows how to create multiple client side counters in pure Astro, which is similar to pure html. Note the usage of document in document.querySelectorAll(".card")

more details in https://docs.astro.build/en/core-concepts/astro-components/

---
//Astro Front matter => Javascript
---
<!-- html -->

<!-- style -->

<!-- script -->
<script>
    console.log("int cards")
    const cards = document.querySelectorAll(".card")
    cards.forEach(card => {
        const plus = card.querySelector('button.plus')
        const minus = card.querySelector('button.minus')
        const value = card.querySelector(".value")
        plus.onclick  = ()=>{value.textContent = parseInt(value.textContent) + 1}
        minus.onclick = ()=>{value.textContent = parseInt(value.textContent) - 1}
    });
</script>

here a link to the full example repo project:

https://github.com/MicroWebStacks/astro-examples#04_client-counters

and here a link to a direct StackBlitz project pointed on that repo

https://stackblitz.com/github/MicroWebStacks/astro-examples/tree/main/04_client-counters

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.