How can i access a variable inside the --- in script?

[vocal kettle]

I have an astro component, which i want to be able to redirect, using the slug route params to another page. The problem is, i am getting the slug inside the --- but i am calling the "click" eventListener inside the script tag, so its not getting the proper scope to get the variable.

---
import StandardGreenButton from "./StandardGreenButton.astro";

import servicesService from "../../services/services.service";

const slugify = Astro.params.slugify!;

const service = await servicesService.findBySlugify(slugify);
---

<script>
    const btnContinuar = document.getElementById('modalButtonConfirm')
    const btnCancelar = document.getElementById('cancelar')

    btnContinuar!.addEventListener('click', () => {
        // alert(window.location.hostname)
        if (window.location.hostname == 'localhost') {
            window.location.href = `http://localhost:3000/servicos/solicitar/${slugify}`
        }
    })
</script>

How can i achieve that?

[clever mica]

You can apply the define:vars directive to your script tag to pass the variables through.

<script define:vars={{ slugify }}>
  ...
</script>

https://docs.astro.build/en/reference/directives-reference/#definevars

[fossil slate]

@vocal kettle keep in mind that Astro frontmatter --- --- section always run on the server, while script tag<script> always on the client.
For variables (and in general states) sync between server and client see this post https://stackoverflow.com/questions/74784560/how-to-share-state-among-components-in-astro/74840400#74840400

especially the section "Sharing State between Client and Server"