Vue adapter

Vue 3 integration

The official adapter returns reactive state and prop objects for your own semantic markup. It never initializes the vanilla controller layer on Vue-owned DOM.

Install

npm install @boobstrap/boobstrap @boobstrap/vue vue

import "@boobstrap/boobstrap/dist/boobstrap.css";
import { useCollapse } from "@boobstrap/vue";

Compose a collapse

The preview is the rendered result of the Vue single-file component directly below it. The composable supplies the button type, relationship, expanded state, panel ID, visibility, and public state while your template supplies the content and classes.

<script setup>
import { useCollapse } from "@boobstrap/vue";

const details = useCollapse({ id: "account-details", defaultOpen: true });
</script>

<template>
  <button class="bs-btn bs-btn-secondary" v-bind="details.getTriggerProps()">
    Account details
  </button>
  <div class="bs-collapse bs-card bs-mt-4" v-bind="details.getPanelProps()">
    <div class="bs-card-body">Profile and security settings.</div>
  </div>
</template>

Coordinate an accordion

Use useAccordion for group state and pass each item's options into useCollapse. The default keeps one item open; set alwaysOpen: true when multiple panels may remain visible.

import { useAccordion, useCollapse } from "@boobstrap/vue";

const accordion = useAccordion({ defaultOpenIds: ["profile"] });
const profile = useCollapse({
  id: "profile-panel",
  ...accordion.getItemOptions("profile"),
});
const billing = useCollapse({
  id: "billing-panel",
  ...accordion.getItemOptions("billing"),
});

See the complete Vue accordion template for semantic headings, prop binding, and panel relationships.

Controlled state

import { ref } from "vue";
import { useDialog } from "@boobstrap/vue";

const open = ref(false);
const dialog = useDialog({ open, onOpenChange: (next) => { open.value = next; } });

Events and lifecycle

Composables emit the same cancelable before-events and completed lifecycle events as core controllers. Change callbacks receive the next value plus detail containing adapter: "vue", a transition reason, and the source event when one exists. DOM listeners, timers, and floating-position listeners are released during component unmount.

Component guides

Use this page for shared ownership rules, then use each component guide for copy-ready templates and component-specific semantics.