Buoy for Vue and Nuxt

Buoy runs in Vue 3.3 and up, built with Vite, as a beta. It runs in Nuxt 4 too. Your app stays all Vue. Buoy uses React for its own screens and brings it along. The full guide is the Vue page.

Install and sign in

Run these from your app folder:

npm install --save-dev @buoy-gg/core @buoy-gg/vue @buoy-gg/network
npx --package=@buoy-gg/core buoy login

Add more tools the same way. Use the same version for all Buoy packages. buoy login writes VITE_BUOY_KEY to a file Git ignores.

Set up in Vue

Add the Vite plugin:

// vite.config.ts
import vue from '@vitejs/plugin-vue';
import { buoy } from '@buoy-gg/core/vite';

export default defineConfig({ plugins: [vue(), buoy()] });

Add the Buoy plugin to your app:

import { buoy } from '@buoy-gg/vue';

createApp(App).use(router).use(pinia).use(buoy).mount('#app');

That's all. The Vite plugin finds your tools and adds the early hook. It leaves Buoy out of prod builds. app.use(buoy) reads your key and starts Buoy when your app mounts. It finds Vue Router, Pinia and Vue Query by itself. It stops Buoy when your app unmounts.

Set up in Nuxt

// nuxt.config.ts
export default defineNuxtConfig({ modules: ['@buoy-gg/vue/nuxt'] });

That's all. Pass options with the buoy key, as plain data. For options with functions, set buoy: { setup: false }. Then call nuxtApp.vueApp.use(buoy, options) in your own client plugin.

Options

app.use(buoy, options) takes the same options as mountBuoy from @buoy-gg/core/web, plus these:

startBuoy(options) starts Buoy with no Vue app. Pass router, pinia and queryClient yourself.

Pinia and refs

Pinia stores show in the Zustand tool by themselves. To show a plain ref or reactive, wrap it:

import { buoyVueRef } from '@buoy-gg/vue/pinia';

app.use(buoy, { zustandStores: { count: buoyVueRef(count) } });

You can read and edit them in the tool. An edit keeps the fields you did not change.

Entry points

Each app entry has a buoy-disabled build that does nothing. The Vite plugin picks it for prod builds.