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!

Manish Shahi
  • 93
  • 1
  • 7
  • 1
    Please note that `is:inline` is not needed and have unexpected drawbacks, see answer with simple ` – wassfila Dec 18 '22 at 12:17

4 Answers4

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.

Eloi
  • 323
  • 1
  • 7
  • 16
  • 2
    While this is the accepted answer, it is worth noting `is:inline` is not required here. See https://stackoverflow.com/a/74839926/3829557 for more details. – swithinbank Dec 18 '22 at 13:52
  • @swithinbank I needed it in my Vue component though... ` – Manfred Jan 09 '23 at 11:10
  • I don’t believe `is:inline` has any impact in Vue components, it’s a syntax only used in `.astro` files. – swithinbank Jan 09 '23 at 13:04
8

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

Hasan Ali
  • 166
  • 1
  • 2
6

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

wassfila
  • 1,173
  • 8
  • 18
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>
David Wolf
  • 1,400
  • 1
  • 9
  • 18