> ## Documentation Index
> Fetch the complete documentation index at: https://docs.enkryptify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue.js

> Use Enkryptify secrets in your Vue app, locally and in production

A Vue single-page app runs entirely in the browser, so treat every value it can read as public. Use Enkryptify secrets for non-sensitive configuration here and keep real secrets on a server.

## Local development

To run your app locally with Enkryptify secrets, install the [Enkryptify CLI](/cli/quickstart) and link it to your project, then prefix your usual start script with `ek run --`:

<CodeGroup>
  ```bash npm theme={"dark"}
  ek run -- npm run dev
  ```

  ```bash pnpm theme={"dark"}
  ek run -- pnpm run dev
  ```

  ```bash yarn theme={"dark"}
  ek run -- yarn dev
  ```

  ```bash bun theme={"dark"}
  ek run -- bun run dev
  ```
</CodeGroup>

Replace `dev` with whatever script starts your app. `ek run` fetches your project's secrets and injects them as environment variables for that command only.

## Accessing secrets in Vue

With Vite, only variables prefixed with `VITE_` are exposed to your code, through `import.meta.env`:

```ts theme={"dark"}
const apiUrl = import.meta.env.VITE_API_URL;
```

Vite inlines these at build time, so run your build through `ek run`:

```bash theme={"dark"}
ek run -- npm run build
```

<Warning>
  Anything exposed to a Vue bundle ships to the browser. Never put a real secret in a `VITE_` variable; use it only for public configuration such as an API base URL.
</Warning>

## Deploying

Build with `ek run -- npm run build` so the `VITE_` values are inlined, then deploy the static output. If your host runs the build, use a [sync](/sync/overview) to provide those variables there.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.