Search documentation

Search documentation

Vue Quickstart

Add a co-pilot panel to your Vue 3 app in under 5 minutes. Works with Vite, Nuxt 3, and any Vue 3 setup.

What you'll build:

  • A slide-out assistant panel with co-pilot chat
  • A sidebar trigger (or custom button) that opens the panel
  • Your first tool the AI can suggest

Prerequisites

Step 1: Install the SDK

bash
npm install @pillar-ai/vue

Or with other package managers:

bash
# yarn
yarn add @pillar-ai/vue


# pnpm
pnpm add @pillar-ai/vue

Step 2: Wrap Your App

Wrap your root component with PillarProvider. In a Vite app, that's App.vue:

Minimal Setup (with sidebar)

App.vue
<!-- App.vue -->
<script setup lang="ts">
import { PillarProvider } from '@pillar-ai/vue';
</script>


<template>
  <PillarProvider :product-key="import.meta.env.VITE_PILLAR_PRODUCT_KEY">
    <RouterView />
  </PillarProvider>
</template>

No additional button is needed — the edge trigger provides the entry point.

Without Sidebar (custom button only)

If you prefer a custom button instead of the built-in sidebar tab:

App.vue
<!-- App.vue -->
<script setup lang="ts">
import { PillarProvider } from '@pillar-ai/vue';


const pillarConfig = {
  edgeTrigger: { enabled: false },
  mobileTrigger: { enabled: false },
};
</script>


<template>
  <PillarProvider
    :product-key="import.meta.env.VITE_PILLAR_PRODUCT_KEY"
    :config="pillarConfig"
  >
    <RouterView />
  </PillarProvider>
</template>

When disabling the sidebar, you'll need to add your own trigger button — see Step 5.

Step 3: Add Environment Variables

Create or update your .env.local file:

examples/quickstarts/vue/env-local.bash
# .env.local
VITE_PILLAR_PRODUCT_KEY=your-product-slug

Where to find your project slug: In the Pillar dashboard, go to Settings → General. Your project slug is displayed under "Project URL".

Step 4: Configure (Optional)

Pass a :config prop to PillarProvider to customize behavior. All options are optional.

vue
<PillarProvider
  :product-key="import.meta.env.VITE_PILLAR_PRODUCT_KEY"
  :config="{
    edgeTrigger: { enabled: true },
    mobileTrigger: {
      enabled: true,
      position: 'bottom-right',
      icon: 'sparkle',
    },
    panel: {
      position: 'right',
      mode: 'push',
      width: 380,
    },
    theme: {
      mode: 'auto',
      colors: { primary: '#2563eb' },
    },
  }"
>
  <RouterView />
</PillarProvider>

See the React quickstart for the full configuration reference — all options are identical across frameworks.

Step 5: Create an Assistant Button (Optional)

Note: This step is only required if you disabled the edge trigger sidebar in Step 2. By default, Pillar shows a sidebar tab on the screen edge that opens the panel — no custom button needed.

Use useHelpPanel() to access panel controls in any component:

examples/quickstarts/vue/assistant-button.vue
<!-- components/AssistantButton.vue -->
<script setup lang="ts">
import { useHelpPanel } from '@pillar-ai/vue';


const { isOpen, toggle } = useHelpPanel();
</script>


<template>
  <button
    class="fixed bottom-4 right-4 bg-primary text-white px-4 py-2 rounded-full shadow-lg"
    @click="toggle"
  >
    {{ isOpen ? 'Close' : 'Ask Assistant' }}
  </button>
</template>

Add it to your App.vue layout:

App.vue
<!-- App.vue -->
<script setup lang="ts">
import { PillarProvider } from '@pillar-ai/vue';
import AssistantButton from './components/AssistantButton.vue';


const pillarConfig = {
  edgeTrigger: { enabled: false },
  mobileTrigger: { enabled: false },
};
</script>


<template>
  <PillarProvider
    :product-key="import.meta.env.VITE_PILLAR_PRODUCT_KEY"
    :config="pillarConfig"
  >
    <RouterView />
    <AssistantButton />
  </PillarProvider>
</template>

Step 6: Test It

  1. Start your development server: npm run dev
  2. Click the sidebar tab on the screen edge (or your custom assistant button)
  3. Ask a question in the co-pilot chat

Using with Nuxt 3

For Nuxt, create a client-side plugin so the SDK only runs in the browser:

plugins/pillar.client.ts
// plugins/pillar.client.ts
import { PillarProvider } from '@pillar-ai/vue';


export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('PillarProvider', PillarProvider);
});

Then wrap your pages in app.vue:

vue
<!-- app.vue -->
<template>
  <PillarProvider :product-key="config.public.pillarProductKey">
    <NuxtPage />
  </PillarProvider>
</template>


<script setup lang="ts">
const config = useRuntimeConfig();
</script>

And add the key to nuxt.config.ts:

typescript
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      pillarProductKey: process.env.NUXT_PUBLIC_PILLAR_PRODUCT_KEY,
    },
  },
});

Next Steps