environment variables to be used in vitepress pages

[fessacchiotto]

hi! I'd like to retrieve the git build and branch data from an environment variable I can set/export at build time.
is there a way I can reference such an env variable somewhere in the markdown files or config files? tia!

[diegosasw]

Also looking for this answer. Is there any way?

[DMiradakis]

This was quite difficult to figure out, but now I think I have it.

1. Thanks to How to using Vite Env Variables? #3896 , I realized that you need to place the .env variable inside the docs folder in your VitePress project.

docs
  |-- .env

Inside the environment variable file:

VITE_SOME_ENV_VARIABLE=SomeValue

3. Next, in your markdown page, add a <script setup> at the top of the page to bring in the environment variable. See below:

<script setup>
const someEnvVariable = import.meta.env.VITE_SOME_ENV_VARIABLE;
</script>

4. Then, you can reference your environment variable using Vue template syntax.

## Some Header

blah blah blah {{ someEnvVariable }} blah blah blah

[nook24]

Thanks! This works.

The VITE_ prefix is important if you need to use the variable in a markdown template. From the docs:

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code. e.g. for the following env variables

Is it possible the load the variables globally that i not have to add the <script setup> part to all templates where I need some variables?

[DMiradakis]

Is it possible to load the variables globally ... so that I don't have to constantly add <script setup> tags everywhere ...

This I am not sure of. Something like this would be extremely convenient, but the App.vue file is abstracted away from us in Vitepress, so I have no idea if we can accomplish this or not.

[brc-dd]

you can do something like this:

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.config.globalProperties.$someEnvVariable = import.meta.env.VITE_SOME_ENV_VARIABLE
  }
} satisfies Theme

then in markdown/vue

{{ $someEnvVariable  }}

https://vuejs.org/api/application.html#app-config-globalproperties
https://vitepress.dev/guide/extending-default-theme

I haven't tested, but most likely vite defines will work fine too.

[nook24]

Many thanks @brc-dd this works perfectly fine