`mushi-mushi/vue`

The Mushi Mushi Vue 3 plugin and composables over mushi-mushi. Shared wrapper notes: Framework wrappers.


npm install mushi-mushi

Still on Vue 2? This adapter requires Vue 3. See the Vue 2 → Vue 3 migration guide, which walks through the bridge build and the Mushi-specific bits.

See Quickstart → Vue for the full setup walkthrough.

API surface


import { MushiPlugin, useMushi, useMushiReport, useMushiWidget } from 'mushi-mushi/vue'

Export	Purpose
`MushiPlugin`	`app.use(MushiPlugin, config)` installs the plugin and boots the SDK (browser only; it does nothing during SSR)
`useMushi()`	Returns the SDK instance, or `undefined` outside the plugin
`useMushiReport()`	Returns `{ submitReport({ description, category }) }`; sends a report from code without opening the widget. Both fields are required
`useMushiWidget()`	Returns `{ isOpen, open, close }` to control the widget

The plugin also chains onto app.config.errorHandler: your existing handler still runs, and the error is sent with captureException().

Setup (Vite / Vue 3)


// main.ts
import { createApp } from 'vue'
import { MushiPlugin } from 'mushi-mushi/vue'
import App from './App.vue'
 
createApp(App)
  .use(MushiPlugin, {
    projectId: 'YOUR_PROJECT_ID',
    apiKey: 'mushi_...',
  })
  .mount('#app')

Identifying users


<script setup lang="ts">
import { watch } from 'vue'
import { useMushi } from 'mushi-mushi/vue'
import { useAuth } from './auth'
 
const mushi = useMushi()
const { user } = useAuth()
 
watch(user, (u) => {
  if (u) mushi?.identify(u.id, { email: u.email, name: u.name })
})
</script>

Submitting a report


<script setup lang="ts">
import { useMushiReport } from 'mushi-mushi/vue'
 
const { submitReport } = useMushiReport()
</script>
 
<template>
  <button @click="submitReport({ description: 'Something feels off', category: 'bug' })">
    Report issue
  </button>
</template>