Getting started

Install @bankai-vue/core, add a theme for the CSS, and render your first component. Works the same in a plain Vue (Vite) app or in Nuxt.

Early development.The API is being designed in the open and nothing is on npm yet — the steps below document the intended shape. Follow the roadmap for the first release.

Installation

You need two packages: @bankai-vue/core for the components and a theme for the CSS. Core ships no CSS of its own — without a theme the components render, but unstyled.

pnpm add @bankai-vue/core @bankai-vue/theme-bankai

Vue (Vite)

Install the plugin with createBankai() and import the theme's CSS once at your entry point.

// main.ts
import { createApp } from 'vue';
import { createBankai } from '@bankai-vue/core';

// The theme ships the CSS — @bankai-vue/core ships none.
import '@bankai-vue/theme-bankai';

import App from './App.vue';

createApp(App)
  .use(createBankai())
  .mount('#app');

Then import components where you use them:

<script setup lang="ts">
import { BankaiButton } from '@bankai-vue/core';
</script>

<template>
  <BankaiButton variant="solid">Click me</BankaiButton>
</template>

Nuxt

Add the first-party module and the theme CSS. The module auto-registers every component (so templates use <Bankai*> with no import), auto-imports the composables, and installs the config per app so it stays per-request under SSR.

// nuxt.config.ts
export default defineNuxtConfig({
  // Auto-registers every component, auto-imports the composables,
  // and installs the config per app (SSR-safe).
  modules: ['@bankai-vue/nuxt'],

  // The theme ships the CSS — @bankai-vue/core ships none.
  css: ['@bankai-vue/theme-bankai'],
});

<template>
  <!-- No import — the module auto-registers every component. -->
  <BankaiButton variant="solid">Click me</BankaiButton>
</template>

Module options

Configure the module under the bankai key. Every option is optional.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@bankai-vue/nuxt'],
  css: ['@bankai-vue/theme-bankai'],

  // All options are optional; the defaults below are what you get with no 'bankai' key.
  bankai: {
    components: true,               // auto-register <Bankai*> components for template use
    composables: true,              // auto-import useBankaiId / usePrefixedId / useBankaiConfig
    config: { idGeneration: true }, // initial BankaiConfig, applied per-request under SSR
  },
});

Choosing a theme

Themes are separate CSS packages — core resolves against none of them, so you pick one and import its CSS. Two ship today:

@bankai-vue/theme-bankai — the signature house look, an opinionated set of styled defaults. Customize it through --bankai-* custom properties.
@bankai-vue/theme-tailwind — remaps the design tokens onto your Tailwind scale, so your own Tailwind design language drives the components. Requires Tailwind CSS v4.

Both override cleanly because the theme CSS is authored with zero-specificity :where() selectors.

Configuration

Pass initial config to createBankai() (or the module's bankai.config). Read or mutate it at runtime with useBankaiConfig() inside a component's setup.

import { createBankai } from '@bankai-vue/core';

app.use(
  createBankai({
    idGeneration: false,
    linkOrigin: 'https://example.com',
  }),
);

Prop	Type	Default	Description
`idGeneration`	`boolean`	`true`	Whether components generate a stable id when the consumer supplies none. A consumer-provided id always wins.
`warnings`	`boolean`	`true`	Emit development warnings for likely-mistaken usage. Already stripped from production builds; set false to silence them in dev too.
`linkComponent`	`Component \| string`	—	Force the component BankaiLink renders for internal navigation. Leave unset to auto-detect NuxtLink → RouterLink → <a>.
`linkOrigin`	`string`	—	Site origin BankaiLink compares an href against to decide it is external. Set it for accurate, hydration-safe checks under SSR/SSG.
`linkNoopener`	`boolean`	`true`	Auto-add rel="noopener noreferrer" to a target="_blank" link. A consumer-provided rel always wins.
`codeBlockCopiedDuration`	`number`	`2000`	How long (ms) BankaiCodeBlock's copy button stays in its copied state before reverting. A per-instance copiedDuration prop overrides it.

Next steps

Browse the components for props, slots, and live examples.