Search documentation

Search documentation

Composable@pillar-ai/vue

usePillar()

Composable to access the Pillar SDK instance and state

typescript
import { usePillar } from '@pillar-ai/vue'

Signature

typescript
function usePillar<TActions extends SyncActionDefinitions | ActionDefinitions = SyncActionDefinitions>(): TypedUsePillarResult<TActions>

Return Value

Return Value

pillar
requiredPillarContextValue['pillar']
No description.
onTask
required<TName extends ActionNames<TActions>>( taskName: TName, handler: (data: ActionDataType<TActions, TName>) => void ) => () => void
Type-safe task handler registration.

Returns

TypedUsePillarResult

Examples

tsx
Basic usage (untyped)
```vue
<script setup lang="ts">
import { usePillar } from '@pillar-ai/vue';


const { isReady, open, close, isPanelOpen } = usePillar();
</script>


<template>
<div v-if="!isReady">Loading...</div>
<button v-else
tsx
<script setup lang="ts">
import { usePillar } from '@pillar-ai/vue';
import { actions } from '@/lib/pillar/actions';
import { onMounted, onUnmounted } from 'vue';


const { pillar, onTask } = usePillar<typeof actions>();


let unsub: (() => void) | undefined;


onMounted(() => {
// TypeScript knows data has { type, url, name }
unsub = onTask('add_new_source', (data) => {
console.log(data.url); // ✓ Typed!
});
});


onUnmounted(() => {
unsub?.();
});
</script>
Source: packages/sdk-vue/src/composables/usePillar.ts