---
title: "Source Maps"
description: "Upload your source maps to Sentry to enable readable stack traces in your errors."
url: https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/
---

# Source Maps | Sentry for Vue

To enable readable stack traces in your Sentry errors, you need to upload your source maps to [Sentry](https://sentry.io/welcome/).

The easiest way to configure uploading source maps is by using the [Sentry Wizard](https://docs.sentry.io/platforms/javascript/sourcemaps.md#uploading-source-maps).

See how uploading source maps lets you see the exact line of code that caused an error:

## [Uploading Source Maps in a Vue Project](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps.md#uploading-source-maps-in-a-vue-project)

This guide assumes you are using the `@sentry/vue` SDK on version `7.47.0` or higher.

If you are on an older version and you want to upload source maps we recommend upgrading your SDK to the newest version.

### [Using the Sentry Wizard](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps.md#using-the-sentry-wizard)

The easiest and recommended way to configure uploading source maps is by using the Sentry Wizard:

```bash
npx @sentry/wizard@latest -i sourcemaps
```

The wizard will guide you through the following steps:

* Logging into Sentry and selecting a project
* Installing the necessary Sentry packages
* Configuring your build tool to generate and upload source maps
* Configuring your CI to upload source maps

If you want to configure source maps upload manually, follow the guide for your bundler or build tool below.

### [Manual Setup with Vite](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps.md#manual-setup-with-vite)

If you are using Vue, chances are good you are using Vite to bundle your project. You can use the Sentry Vite plugin to automatically create [releases](https://docs.sentry.io/product/releases.md) and upload source maps to Sentry when bundling your app.

#### [Installation](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps.md#installation)

```bash
npm install @sentry/vite-plugin --save-dev
```

#### [Configuration](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps.md#configuration)

Learn more about configuring the plugin in our [Sentry Vite Plugin documentation](https://www.npmjs.com/package/@sentry/vite-plugin).

To upload source maps you have to configure an [Organization Token](https://sentry.io/orgredirect/organizations/:orgslug/settings/auth-tokens/).

Alternatively, you can also use a [Personal Token](https://sentry.io/orgredirect/organizations/:orgslug/settings/account/api/auth-tokens/), with the "Project: Read & Write" and "Release: Admin" permissions.

Auth tokens can be passed to the plugin explicitly with the `authToken` option, with a `SENTRY_AUTH_TOKEN` environment variable, or with a `.env.sentry-build-plugin` file in the working directory when building your project. You likely want to add the auth token as an environment variable to your CI/CD environment.

`.env.sentry-build-plugin`

```bash
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
```

Using environment variables in Vite configs

Vite doesn't automatically load `.env` files into `process.env` when evaluating the config file. If you store your auth token in a `.env` file and want to access it via `process.env.SENTRY_AUTH_TOKEN`, use Vite's [`loadEnv`](https://vite.dev/guide/api-javascript#loadenv) helper:

`vite.config.js`

```javascript
import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    plugins: [
      sentryVitePlugin({
        authToken: env.SENTRY_AUTH_TOKEN,
        // ...
      }),
    ],
  };
});
```

Alternatively, use a `.env.sentry-build-plugin` file, which the Sentry plugin reads automatically.

Example:

`vite.config.js`

```javascript
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { sentryVitePlugin } from "@sentry/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: "hidden", // Source map generation must be turned on
  },
  plugins: [
    vue(),

    // Put the Sentry Vite plugin after all other plugins
    sentryVitePlugin({
      org: "___ORG_SLUG___",
      project: "___PROJECT_SLUG___",
      authToken: process.env.SENTRY_AUTH_TOKEN,

      sourcemaps: {
        // As you're enabling client source maps, you probably want to delete them after they're uploaded to Sentry.
        // Set the appropriate glob pattern for your output folder - some glob examples below:
        filesToDeleteAfterUpload: [
          "./**/*.map",
          ".*/**/public/**/*.map",
          "./dist/**/client/**/*.map",
        ],
      },
    }),
  ],
});
```

Generating source maps **may expose them to the public**, potentially causing your source code to be leaked. You can prevent this by configuring your server to deny access to `.js.map` files, or by using [Sentry Vite Plugin's `sourcemaps.filesToDeleteAfterUpload`](https://www.npmjs.com/package/@sentry/vite-plugin#sourcemapsfilestodeleteafterupload) option to delete source maps after they've been uploaded to Sentry.

The Sentry Vite plugin doesn't upload source maps in watch-mode/development-mode. We recommend running a production build to test your implementation.

### [Other Bundlers](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps.md#other-bundlers)

In case you are using a bundler other than Vite to build your Vue project, we've compiled a list of guides on how to upload source maps to Sentry for the most popular JavaScript bundlers:

* [Webpack](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/uploading/webpack.md)
* [TypeScript (tsc)](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/uploading/typescript.md)
* [Rollup](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/uploading/rollup.md)
* [esbuild](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/uploading/esbuild.md)

## [Other Tools](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps.md#other-tools)

If you're not using any of tools above, we assume you already know how to generate source maps with your toolchain and we recommend you upload them using [Sentry CLI](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/uploading/cli.md).

Though we strongly recommend uploading source maps as part of your build process, for browser applications it's also possible to [host your source maps publicly](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/uploading/hosting-publicly.md).

## [Additional Resources](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps.md#additional-resources)

* [Using sentry-cli to Upload Source Maps](https://docs.sentry.io/cli/releases.md#sentry-cli-sourcemaps)
* [4 Reasons Why Your Source Maps Are Broken](https://blog.sentry.io/2018/10/18/4-reasons-why-your-source-maps-are-broken)

## Pages in this section

- [Uploading Source Maps](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/uploading.md)
- [Troubleshooting Source Maps](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/troubleshooting_js.md)