Skip to content

How to access configuration values in Astro components

The Valley of Code

Your Web Development Manual

UPDATE 23 Jan 2023: I just found out this does not work any more in latest Astro (had an older version..). Not sure why, some rollup error I can’t find on Google and don’t have the time to figure out. So now I just write in a config.mjs file instead, and load that instead of astro.config.mjs.

I had the need to have a global flag on my site, and when that flag was true I wanted to display something. If false, I wanted that information to be hidden, on multiple page components.

So, a single flag to change how the site looked.

Here’s what I did.

I put that flag in astro.config.mjs

export default /** @type {import('astro').AstroUserConfig} */ ({
  renderers: ['@astrojs/renderer-react'],
  devOptions: {
    tailwindConfig: './tailwind.config.cjs',
  },
  signupsOpen: false,
})

Note the last entry signupsOpen. That’s the one I added.

Then I referenced that value in every component I wanted to use it.

Something like this:

---
import Config from '../../astro.config.mjs'
---

<div>
  {Config.signupsOpen && <p>flag is true</p>}
</div>
→ Read my Astro Tutorial on The Valley of Code
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ free coding BOOKS, download them here
  • SOLOPRENEUR LAND the missing MBA for wannabe solopreneurs craving a life with more freedom, control, fulfillment and purpose (summer 2024)