Vue with AllStak

Installation

Install from npm (requires vue@^3.2).

npm install @allstak/vue

Configuration

Register AllStakPlugin on your app with your project API key.

import { createApp } from 'vue';
import { AllStakPlugin } from '@allstak/vue';
import App from './App.vue';

createApp(App)
  .use(AllStakPlugin, {
    apiKey: import.meta.env.VITE_ALLSTAK_API_KEY,
    environment: import.meta.env.MODE,
    release: import.meta.env.VITE_APP_VERSION,
  })
  .mount('#app');

Basic example

Capture errors via the useAllStak composable.

import { useAllStak } from '@allstak/vue';

const allstak = useAllStak();
allstak.captureException(new Error('payment declined'));

Capturing errors

Uncaught render errors are captured automatically (attachErrorHandler, default true). You can also wrap a subtree with AllStakErrorBoundary.

<script setup>
import { AllStakErrorBoundary } from '@allstak/vue';
</script>

<template>
  <AllStakErrorBoundary>
    <RiskyWidget />
    <template #fallback="{ error }">
      <p>Sorry — something broke. ({{ error?.message }})</p>
    </template>
  </AllStakErrorBoundary>
</template>

Tracking requests

HTTP, breadcrumbs, and web-vitals are wired automatically through the underlying @allstak/js pipeline; the Vue package documents no separate HTTP-tracking call.

Best practices

• Keep the API key in VITE_ALLSTAK_API_KEY, not in source.
• Pass router and autoInstrumentRouter to trace route changes.
• Set release so errors group per deploy.