# Vue

> A plugin, installed once in main.ts.

Source: https://docs.usejot.co/docs/install/vue

<Callout title="Packages are on their way to npm">
  Until `@usejot/vue` is published, the [script tag](/docs/install/script) in your `index.html` does
  the same job today.
</Callout>

```bash
npm install @usejot/vue
```

```ts title="src/main.ts"
import { createJot } from "@usejot/vue";

app.use(createJot({ projectKey: "jot_pk_your_key" }));
```

Prefer a component? Mount the renderless `JotWidget` anywhere in your tree —
it loads the widget on mount and removes it on unmount.

```vue title="src/App.vue"
<script setup lang="ts">
import { JotWidget } from "@usejot/vue";
</script>

<template>
  <RouterView />
  <JotWidget :config="{ projectKey: 'jot_pk_your_key' }" />
</template>
```

Every [script option](/docs/install/script#options) is a config key: `trigger`,
`edge`, `offset`, `environment`, `autostart`.

Using Nuxt? Use [`@usejot/nuxt`](/docs/install/nuxt) instead.