Skip to content


Bunshi ships with support for Vue out of the box. Support is based on the Composition API introduced in Vue 3.

import { useMolecule, provideScope } from "bunshi/vue";

Basic API


Use a molecule for the current scopes. Will produce a different value depending on the scope of the component that uses it.

<script setup>
import { useMolecule } from "bunshi/vue";
import { useStore } from "@nanostores/vue";
import { FormErrors } from "../molecules";

const { errors } = useMolecule(FormErrors);
const list = useStore(errors);

  <header>Errors: {{ list.join(", ") }}</header>

By default useMolecule will provide a molecule based off the implicit scope of the component. You can override this behaviour by passing options to useMolecule.

  • withScope - will overide a scope value
  • withUniqueScope - will override a scope value with a new unique value
  • exclusiveScope - will override ALL scopes

Instead of implicit scopes from provideScope, you can use an explicit scope when using a molecule. This can simplify integrating with other libraries.


Provides a new value for Scope. This will provide scope to any calles to useMolecule in components inside of the components <slot>.

<script setup>
import { provideScope } from 'bunshi/vue';
import { formIdScope } from '../scopes'

const formId = Symbol();


    Form id: {{formId}}

Vue 2 and Options API

Bunshi does not yet support the options API. But since Bunshi provides a vanilla javascript interface, it should be possible to use Bunshi with older version of Vue.