---
url: https://simpledatalogs.com/docs/quickstarts/vue-nuxt.md
description: >-
  Add simpledatalogs to a Vue (Vite) or Nuxt app in one minute, with page views,
  sessions and errors captured by one line.
---

# Vue and Nuxt

## Install

```sh
npx simpledatalogs init
npm install simpledatalogs
```

`init` tells Vue and Nuxt apart and shows the diff before writing.

## Vue on Vite

```sh
# .env.local
VITE_SIMPLEDATALOGS_KEY=sdl_pub_…
```

```ts
// src/main.ts, after the other imports
import { init } from 'simpledatalogs'

init({ key: import.meta.env.VITE_SIMPLEDATALOGS_KEY, autocapture: true })
```

## Nuxt

A client-only plugin (`app/plugins/` on Nuxt 4, `plugins/` before):

```ts
// app/plugins/simpledatalogs.client.ts
import { init } from 'simpledatalogs'

export default defineNuxtPlugin(() => {
  init({ key: 'sdl_pub_…', autocapture: true })
})
```

A public key is write-only and safe in the browser, so it can sit in the file. To keep it in the environment instead, add `runtimeConfig.public.simpledatalogsKey` to `nuxt.config` and read it with `useRuntimeConfig()`.

## Only your own events

Leave out `autocapture` and call `track()`:

```ts
const sdl = init({ key: 'sdl_pub_…' })

sdl.track('report_exported', { format: 'csv' })
```

## In the first minute

* `session_start` and a `page_view` with `path`, `title`, `referrer` and `utm_*`.
* A `page_view` on every Vue Router navigation that changes the path.
* Uncaught errors and unhandled rejections on the **Logs** tab. Errors Vue catches itself go to `app.config.errorHandler`; forward them with `sdl.log('error', error)`.

## Autocapture defaults

| Feature | `autocapture: true` |
|---|---|
| Page views, including router navigation | on |
| Sessions | on |
| Errors and unhandled rejections | on |
| Outbound link clicks | off |
| Do Not Track / Global Privacy Control | respected |