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

[DMiradakis]

Try using ```bash-vue ``` instead of ```bash ```. I don't remember where or how I found that, but it works for my docsite: https://docs.didact.dev/quickstarts/create-flow-library

[brc-dd]

specify -vue prefix on fences - https://vitepress.dev/guide/using-vue#unescape-in-code-blocks

```txt-vue
But not in code block {{ $RELEASE_VERSION  }}
```

[nook24]

Many thanks didn't saw this in the docs!

[pronebird]

This seems to break markdown links when used in URL part of it. Any solution to that?

[brc-dd]

You’ll need to write anchor tag instead of markdown for that:

<a :href="`/foo${var}`">link to foo</a>