How to pass variable from frontmatter to script in Astro js. Like this:

---
const title = "this is title"
---

some content


<script>

const metatile = title

<script>

How to pass variable from frontmatter to script in Astro js. Like this:

---
const title = "this is title"
---

some content


<script>

const metatile = title

<script>

• javascript
• astrojs

• You may need to get a little more specific in your post, because Astro is "by default" paired with the "Front Matter CMS", so your question needs to add more details: you're showing markdown, which "thing" is this markdown for? Is it pure Astro? If not, what else is involved? Also given that a title ends up being, unsurprisingly, the page title, is this just an example or is this the thing you needed? Because then the answer is "why would you need to access the variable itself, set the page title in that markdown frontmatter, and then get document.title in your JS." – Mike 'Pomax' Kamermans Commented Jul 18, 2023 at 15:35
• Does this answer your question? How do I pass a server variable to client side JS in astro? – wassfila Commented Jul 18, 2023 at 20:35

1 Answer 1

You can use the define:vars directive to pass the value to the client.

---
const title = "this is title"
---

<script define:vars={{title}}>
  alert(title);
<script>

The above method will disable any Vite bundling. If you need the script to be analyzed & bundled by Vite (if it uses TypeScript or imports) you can use this second method to set the value to a data-* attribute, then read it on the client.

---
const message = "Hello world";
---

<!-- Store the message prop as a data attribute. -->
<astro-greet data-message={message}>
  <button>Say message</button>
</astro-greet>

<script>
  class AstroGreet extends HTMLElement {
    constructor() {
      super();

      // Read the message from the data attribute.
      const message = this.dataset.message;

      const button = this.querySelector('button');
      button.addEventListener('click', () => {
        alert(message);
      });
    }
  }

  customElements.define('astro-greet', AstroGreet);
</script>